跨域资源共享CORS详解及常见错误解决方案

文章转载自我自己的小破站 摸鱼好地方。欢迎大佬们围观~

1. CORS请求分类

浏览器一般将CORS请求分为两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求：

（1）请求方法仅属于 HEAD、GET、POST 其中一种

（2）HTTP头部仅包含以下字段：

• Accept
• Accept-Language
• Content-Length
• Last-Event-ID
• Content-Type：仅包括 application/x-www-form-urlencoded、multipart/form-data、text/plain

2. 简单请求

2.1 基本流程

浏览器直接发出CORS请求，并在请求头部增加一个 Origin 字段。

2.2 响应头部

（1）Access-Control-Allow-Origin（必选）

该值要么为请求报文的 Origin 字段，要么为 *，表示接受来自任意域名的请求。

（2）Access-Control-Allow-Credentials（可选）

该值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers（可选）

CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’) 可以返回FooBar字段的值。

2.3 withCredentials属性

主要用于浏览器发送 Cookie 和 HTTP 认证信息。

浏览器和服务器能够发送 Cookie 需要满足下面的配置：

1. 服务器指定回包头部 Access-Control-Allow-Credentials: true
2. 浏览器发送请求时配置 xhr.withCredentials = true

需要注意的是，如果要发送Cookie（即 withCredentials 为 true），Access-Control-Allow-Origin 就不能设为 *，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

3. 非简单请求

3.1 基本流程

浏览器会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

3.2 OPTIONS请求

3.2.1 请求头部

（1）Access-Control-Request-Method（必选）

列出浏览器的CORS请求会用到哪些HTTP方法

（2）Access-Control-Request-Headers（可选）

指定浏览器CORS请求会额外发送的头信息字段，以逗号分隔

3.2.2 响应头部

（1）Access-Control-Allow-Methods（必选）

该值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

（2）Access-Control-Allow-Headers（可选）

如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Max-Age（可选）

用来指定本次预检请求的有效期，单位为秒。有效期内可以不再发起预检请求。

（4）Access-Control-Allow-Credentials（可选）

与简单请求同名字段含义相同

4. 常见错误及解决方案

4.1 withCrendentials与服务器Access-Control-Allow-Origin不匹配

// 浏览器发送
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'url', true);
xhr.send(null);

// 回包
// Access-Control-Allow-Origin: *
1
2
3
4
5
6
7
8

Access to XMLHttpRequest at ‘url’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

4.2 请求方法不被服务器允许

// 浏览器发送
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'url', true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send(null);

// 回包
// Access-Control-Allow-Methods: GET, OPTIONS, POST, HEAD
1
2
3
4
5
6
7
8

Access to XMLHttpRequest at ‘url’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

4.3 请求头字段不被服务器允许

// 浏览器发送
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.setRequestHeader('Authorization', 'value');
xhr.send(null);

// 回包
// Access-Control-Allow-Headers: X-Requested-With,Content-Type
1
2
3
4
5
6
7
8

Access to XMLHttpRequest at ‘url’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

5. 参考文献

[1] https://www.ruanyifeng.com/blog/2016/04/cors.html