跨域

浏览器为了安全设置了同源策略，所以不属于同源策略都是跨域。

跨域的原理

跨域，由于浏览器的同源策略，浏览器不能执行其他网站的脚本。
同源策略，浏览器对 JavaScript 实施安全限制，只要协议、域名、端口有任一不同，都被视作不同的域。

同源策略：  

• 同源：协议相同，域名相同，端口相同。  
• 目的：保护用户信息安全，防止恶意网站窃取信息。

非同源则受到限制：

1. cookie无法读取。
2. DOM无法获得。
3. AJAX请求不能发送。

因此，我们需要通过不同方法，避开浏览器安全限制

跨域解决方案

• JSONP 跨域

利用<script>标签没有跨域限制，通过<script>标签的src属性，发送带有 callback 参数的 GET 请求，服务器将接口返回数据拼凑到 callback 函数中，返回浏览器，浏览器解析执行，从而前端拿到 callback 函数的返回数据。缺点是只支持 GET。

• CORS，跨域资源共享

服务器设置对 CORS 的支持，服务器设置 Access-Control-Origin HTTP 响应头之后，浏览器将会允许跨域请求

• proxy 代理

  • 开发环境：webpack 中设置 proxy 代理到后端服务
  • 生产环境：通过配置 Nginx 反向代理，把请求转发到后端。浏览器认为是往当前网址下的一个路径发送请求，实际经过 Nginx 反向代理，发送给了对应的后台服务器，从而实现请求不同地址的后端