跨域问题•

由于浏览器有一个安全功能——同源策略，即同协议，同域名，同端口。只要有一个不同就会产生跨域问题。同源策略会在请求后端接口的时候抛出一个错误，导致无法请求后端服务。

跨域问题只会出现在前端浏览器，服务端不会涉及跨域问题，也就是一个服务端请求另一个服务端的时候不会出现跨域问题

代理服务器(反向代理)•

webpack、vue和react都采用代理的方案来解决跨域问题，这种方式只在本地开发有效，因为是运行在node上的。

如果不想依赖这些框架和工具可以使用http-proxy-middleware，这个中间件可以实现快捷的代理。

在线上可以使用nginx、apache等反向代理服务器实现代理

jsonp•

jsonp是一种非正规的手法，它通过标签的设计“漏洞”来解决跨域问题。

<script>和<img>标签中有一个src的属性 ，这个属性没有跨域限制。<script>的src属性可以引入一些cdn资源，自然也可以通过这个属性来请求后端接口，由此有了jsonp这种非常规方案。

jsonp只支持get请求

这篇文章描述了jsonp这种方案是如何实现的和方法是如何封装的。

如果不想自己封装方法，也可以使用jquery.ajax来实现，jquery在ajax方法中也提供了通过jsonp获取数据的方法。

1
2
3
4
5
6
7
8
9
10
// jquery中通过jsonp跨域的实例
  $.ajax({
    url: "https://xxxx",
    type: "GET",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "callback",
    success: function(){},
    error: function(){},
  });

后端设置跨域(CORS)•

后端设置请求返回的响应头，启用跨源资源共享（CORS），此时就可以使用XMLHttpRequest、fetch、aixos来正常请求资源。

两种方案的使用场景•

  • 一般项目都需要上线服务器，服务器上配置代理服务器就使用反向代理，本地开发就按项目线上的情况来选择或者使用项目框架的代理。

  • 如果项目是部署在一些无法设置代理的公共平台，如Github Pages上，就无法在线上进行代理，使用jsonp或者CORS将是最好的选择