CORS原理解析#

CORS是跨源AJAX请求的根本解决方法. JSONP只能发GET请求, 但是CORS允许任何类型的请求.

整个CORS通信过程都是浏览器自动完成的, 不需要用户参与. 对于开发者来说, CORS通信与同源的AJAX通信没有差别, 代码完全一样. 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是**服务器. **只要服务器支持 CORS, 就可以跨源通信.

简单请求和非简单请求#

Simple requests

直接在请求时加上 Origin 的 header

Preflighted requests

发出请求前, 会发起一次 OPTION 请求

Nginx CORS 配置#

add_header不是所有返回都会追加，只限特定状态码的返回才有效，如果想所有返回都生效需要加上always选项参数

官方的解释

1
Syntax:  add_header name value [always];
2
Default:  —
3
Context:  http, server, location, if in location

1
# 配置示例
2
location  /path {
3
  proxy_pass target;
4
  add_header 'Access-Control-Allow-Origin' $http_origin always;
5
  add_header 'Access-Control-Request-Method' 'GET,POST,OPTIONS,DELETE,PUT' always;
6
  add_header 'Access-Control-Allow-Credentials' 'true' always;
7
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
8
}

CORS 响应头说明#

header	是否必填	说明
`Access-Control-Allow-Origin`	Y	`Access-Control-Allow-Origin` 它的值要么是请求时`Origin`字段的值，要么是一个``，表示接受任意域名的请求, 不推荐``
`Access-Control-Allow-Credentials`	N	The `Access-Control-Allow-Credentials` header indicates whether or not the response to the request can be exposed when the `credentials` flag is true.
`Access-Control-Expose-Headers`	N	The `Access-Control-Expose-Headers` header adds the specified headers to the allowlist that JavaScript (such as `Response.headers`) in browsers is allowed to access.
`Access-Control-Allow-Headers`	Y	The `Access-Control-Allow-Methods` header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.
`Access-Control-Allow-Methods`	Y	The `Access-Control-Allow-Methods` header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.
`Access-Control-Max-Age`	N	The `Access-Control-Max-Age` header indicates how long the results of a preflight request can be cached.

CORS 请求头说明#

header	说明
`Origin`	The `Origin` header indicates the origin of the cross-origin access request or preflight request.
`Access-Control-Request-Method`	The `Access-Control-Request-Method` is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.
`Access-Control-Request-Headers`	The `Access-Control-Request-Headers` header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made (for example, by passing them as the `headers` option to the `Request()` constructor). This browser-side header will be answered by the complementary server-side header of `Access-Control-Allow-Headers`.

浏览器同源策略#

CORS原理解析#

简单请求和非简单请求#

Nginx CORS 配置#

CORS 响应头说明#

CORS 请求头说明#

📎 参考文章#

文章分享

评论区