HTTP跨域小结
前言
现在前后端分离的架构非常普遍。前端语言使用Vue开发，后端开发使用Java，Python，Golang等语言。前端Vue通过调用后端程序提供的接口进行数据交互。这种情况基本都会遇到跨域调用的问题。
一般有两种解决跨域问题的方法，一种是后端程序使用支持跨域的库解决跨域问题，第二种是在代理层Nginx上解决跨域问题。今天说的是第二种方法。
概念介绍
CROS
跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。
相关HTTP头字段
Access-Control-Allow-Origin
Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。
常用语法 Access-Control-Allow-Origin: * （允许所有域都具有访问资源的权限）
Access-Control-Allow-Methods
响应首部 Access-Control-Allow-Methods 在对 preflight request.（预检请求）的应答中明确了客户端所要访问的资源允许使用的方法或方法列表。
常用语法 Access-Control-Allow-Methods: POST, GET, OPTIONS （允许的HTTP请求方法）
Access-Control-Allow-Headers
响应首部 Access-Control-Allow-Headers 用于 preflight request （预检请求）中，列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。
常用语法 Access-Control-Allow-Headers:
[, ]* （自定义的请求头也需要列在这里） 示例：Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,XX-uuid,XX-name
说明
Access-Control-Allow-Methods 和Access-Control-Allow-Headers ，这两个请求头，对于一些浏览器，不支持 * (Wildcard)
不支持的浏览器包括：Internet Explorer，Safari，Firefox for Android，Safari on iOS
用的时候配置对应的参数即可
Nginx配置示例
在Nginx的Server块内添加以下配置
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,XX-uuid,XX-name';
if ($request_method = 'OPTIONS') {
return 204;
}
说明
if ($request_method = 'OPTIONS') {
return 204;
}
表示Http一次“预检”请求，浏览器查询服务器，是否请求的域名在服务器的许可名单中，得到肯定答复后，浏览器才会发起正式请求。
参考站点
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
https://www.ruanyifeng.com/blog/2016/04/cors.html
https://www.jianshu.com/p/4da65de0c02b