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