跨域资源共享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: *

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

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

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
跨域资源共享(Cross-Origin Resource Sharing,简称CORS)是一种机制,用于在浏览器中处理跨域请求。当一个网页的源(origin)与请求的目标资源的源不一致时,浏览器会执行CORS机制来确定是否允许该请求。 CORS错误通常指的是在进行跨域请求时出现的问题。以下是一些常见CORS错误: 1. 同源策略限制:浏览器默认情况下,不允许通过XMLHttpRequest或Fetch API发送跨域请求。如果尝试发送跨域请求,浏览器会阻止该请求,并抛出CORS错误。 2. 预检请求失败:对于某些复杂的跨域请求(例如带有自定义头部信息或使用特殊HTTP方法的请求),浏览器会先发送一个预检请求(OPTIONS请求)来检查服务器是否允许实际请求。如果预检请求失败,浏览器会抛出CORS错误。 3. 服务器未正确配置CORS:服务器需要在响应中添加一些特定的HTTP头部信息来告知浏览器允许跨域请求。如果服务器未正确配置CORS,浏览器会抛出CORS错误。 解决CORS错误的方法包括: 1. 在服务器端正确配置CORS:服务器需要在响应中添加`Access-Control-Allow-Origin`头部信息,指定允许访问的源。还可以添加其他CORS相关的头部信息,如`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。 2. 使用代理服务器:可以通过设置一个代理服务器来转发请求,使得请求变为同源请求,从而避免CORS问题。 3. JSONP:如果只是需要获取数据而不涉及其他类型的请求,可以考虑使用JSONP(JSON with Padding)来进行跨域请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZTao-z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值