前端安全-CORS

记录下CORS的一些相关的知识点

同源策略（Same Origin Policy）

CORS，叫跨源资源共享，是为了解决浏览器同源策略下的跨域问题。所以要注意什么叫同源策略，最关键的点是三要素：协议、host、端口，不满足这三点任意一点的均不满足同源策略。

触发场景

常见的CORS触发有两种常见场景：

1. 需要发跨域请求且读取response
2. 非简单请求，需要过预检

简单请求

HTTP的简单请求不会触发CORS预检，简单请求需要满足如下条件：

1. 请求方法为GET、POST、HEAD之一
2. 除了fetch自动设置的标头外，只能有Accept、Accept-Language、Content-Language、Content-Type和 Range（只允许简单的范围标头值 如 bytes=256- 或 bytes=127-255）
3. Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded之一

不满足如上要求的都会被视为非简单请求，触发CORS预检

CORS预检

预检是浏览器自发的行为，当非简单请求在正式的资源请求前，先发起一次options预检，以判定当前请求是否满足目标网站的跨域要求，细节如下：

客户端发出请求

• Access-Control-Request-Method：带上要正式请求要使用的方法，
• Access-Control-Request-Headers（可选）：带上部分header（请求里JS 设出来的、且不在 CORS 安全列表里的头）
• origin（跨域请求必有），在浏览器场景中无法自定义设置，但是手动发请求时可以，注意和referer的区分

上述条件完备后，向要请求的URL发起OPTIONS请求

服务端响应请求

• Access-Control-Allow-Origin：服务端根据server配置，返回*或者此次白名单命中后回显的Origin，否则预检失败
• Access-Control-Allow-Methods：返回允许访问的方法，只按服务端配置返回，由客户端自己根据服务端的返回判断预检是否成功
• Access-Control-Allow-Headers：如果请求带了这个头则一定返回这个字段，否则可以没有此字段；字段匹配不上则预检失败
• Access-Control-Allow-Credentials: true。这个字段的返回只和服务端配置有关，但前端开了include时，此字段必须返回true且Allow-Origin不能是*，否则预检失败。

本文作者： yd0ng
本文链接： https://blog.yd0ng.top/2026/08/24/%E5%BA%94%E7%94%A8%E5%AE%89%E5%85%A8/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8-CORS/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢您的打赏，大家一起加油喔~

支付宝

微信