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: <header-name>[, <header-name>]* （自定义的请求头也需要列在这里）

示例：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