CORS 跨域请求

CORS 跨域资源共享 （Cross-Origin Resource Sharing）
这里跨域请求服务器以 nginx 服务器为例说明

1、跨域请求特征

请求中包含 Origin 头域，表明从哪个域名中跳到当前域名，如下请求：

GET /test HTTP/1.1
Host: xxxx
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: */*
Origin: http://www.test.com
Referer: http://www.test.com
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

2、简单请求

如下 Javascript 代码会触发简单请求：

var url = 'http://www.test.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.send();

简单请求中 nginx 服务器只需要配置ngx.header["Access-Control-Allow-Origin"] = "*" 即可

3、复杂请求

如下 Javascript 代码会触发复杂请求：

var url = 'http://www.test.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

发送复杂请求时，浏览器会发送一个预检请求（preflight），询问服务器是否支持来自源服务器的请求 Origin，是否支持跨域请求的请求方法 Access-Control-Request-Method，是否支持跨域请求的头域 Access-Control-Request-Headers 等。

上述请求的发送的预检请求的内容如下：

OPTIONS /cors HTTP/1.1
Host: 81.69.38.197
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: x-custom-Header
Origin: http://www.test.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Sec-Fetch-Mode: cors
Referer: http://www.test.com/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

Nginx服务器在收到该请求之后，需要响应给浏览器自己是否支持这些请求内容。若支持，则 nginx配置如下：

if ($request_method = OPTIONS ) {
	add_header Access-Control-Allow-Origin  '*';
	add_header Access-Control-Allow-Methods 'get';
	add_header Access-Control-Allow-Headers 'x-custom-Header';
	return 200;
}

返回如下响应内容：

HTTP/1.1 200 OK
Date: Mon, 05 Jul 2021 11:54:31 GMT
Access-Control-Request-Headers: x-custom-Header
Access-Control-Request-Method: GET
Access-Control-Allow-Origin: *
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip