这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战 !
在熟悉跨域之前，我们先熟悉一下同源策略。
同源策略
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。- MDN
如果两个 URL 的protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:
所谓同源是指，域名，协议，端口均相同。 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。
跨域定义
不同源即为跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域
为什么浏览器要限制跨域访问呢？
安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题
为什么要跨域？
既然有安全问题，那为什么又要跨域呢？ 有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。
跨域解决方案（重点）
方案好多大佬都做了详细介绍，我就不一一说明了，感兴趣的可以逐个搜索深入理解。
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe跨域
- postMessage跨域
- 跨域资源共享（CORS）
- nginx代理跨域
- nodejs中间件代理跨域
- WebSocket协议跨域
额外说一种webpack构建的项目可以使用devServer
配置:
proxy: {
'/login': {
target: 'http://10.28.152.63:3660/tphh/login',
changeOrigin: true, // needed for virtual hosted sites
ws: false, // proxy websockets
pathRewrite: { // pathRewrite表示路径重写，key表示一个正则，value表示别名
'^/login': '/' // 即用 '/api'表示'http://localhost:3000/api'
}
},
文档如下：
