三种实现跨域请求的思路

首先介绍一些什么是跨域，MDN上关于跨域的解释如下：

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

说的直白一点就是：前端发起ajax请求的目标（域名+端口）与当前源（当前域名+端口）不匹配，此时这种请求就是跨域请求。

那么如何避免跨域请求呢？
可以更改后端域名，保持和当前origin一致，这样子直接就是同源请求，就无需考虑跨域的种种限制。

但是如果后端域名无法变更，跨域避免不了的时候怎么办呢？在这里将介绍三种实现跨域请求的思路。

后端更改HTTP响应头部实现跨域

此方法的思路就是遵循HTTP的CORS规范，返回指定的HTTP头部给前端，放行特定域名（或所有域名）的跨域请求。
具体应该返回哪些头部，只需要参考MDN的文档，根据请求的不同（简单请求或复杂请求）来返回不同的头部即可。

关于如何给HTTP响应添加头部也有两种实现的思路，一种是在开发层面通过代码实现，就拿PHP来说，可以通过header方法来添加HTTP响应头部，其他语言或后端框架应该也有相应的实现，只需要查阅相关手册即可。

另一种添加HTTP返回头部的方法就是通过web服务器的配置来实现，比如nginx就可以通过add_header指令来实现（对于nginx配置好add_header头部，不生效的问题，在我的这篇博文里面有介绍）。即在运维的层面来实现。

image.png

反向代理实现跨域

此解决方案是在运维层面通过配置一个反向代理服务器来将前端发送过来的请求反代到真实的后端服务器上，此时反向代理服务器的域名和前端域名保持一致，就不会触发跨域。

前端（域名A） → 反向代理（域名A） → 后端服务器（域名B）

下图是nginx的一些配置片段：

反向代理服务器配置：

image.png
image.png

上述配置表示当前端请求http://xxx/api/xxx接口时，nginx反代服务器会将请求转发给upstream配置的服务器上，转发的时候保持/api/xxxuri不变。

这里注意一定要使用proxy_set_header设置好后端接口的真实域名，不然请求转发到后端服务器时，请求的目标域名与前端的Host头部是一致的，会导致请求失败。

通过http-proxy-middleware实现跨域

此中间件本质上扮演的角色也相当于一个反向代理服务器，通过代理的方式将请求转发给后端，以此来实现跨域。

不过此种方式实现的好处在于不需要运维层面的支持，只需要前端工程师做好配置即可，而且此插件可以非常方便的集成在webpack中，一般用来给前端工程师在本地环境开发调试接口时使用。

以下是vue cli关于此插件的配置片段：

image.png

注意proxyTable的配置，target的值就是后端的真实域名。

最后还可以通过jsonp来实现跨域，不过此种方法比较原始，并且没有遵循HTTP的规范，而且需要后端接口对前端的请求做特殊的处理，现在已经很少有人使用这种方法实现跨域了。

完！

参考资料：
MDN - HTTP访问控制（CORS）
php - header
API Proxying During Development
github - http-proxy-middleware
nginx - add_header
nginx - proxy_set_header