type
status
date
slug
summary
tags
category
icon
password
跨域（CORS）机制总结
1. 浏览器是否会拦截跨域请求？
- HTML 标签类资源（如
<img>,<script>,<audio>,<link>）： - 浏览器默认允许加载跨域资源
- 但 JS 不能操作/读取其内容，除非服务器设置了
Access-Control-Allow-Origin
- JavaScript 主动发起的请求（如
fetch,XMLHttpRequest）： - 浏览器会启用 CORS 校验
- 请求和响应都需符合规范，才能让 JS 正常读取
2. 请求阶段（浏览器会做什么判断？）
浏览器判断请求是否是“简单请求（simple request）”：
简单请求的三个条件：
- 请求方法为
GET/HEAD/POST
- 请求头只能包含 safelisted headers（如
Accept,Content-Type, 不含自定义头）
Content-Type仅限于：text/plainapplication/x-www-form-urlencodedmultipart/form-data
满足上述条件 → 直接发请求，不满足 → 触发预检（preflight）
3. 预检请求（OPTIONS）
浏览器先发出一条
OPTIONS 请求，询问服务器是否允许跨域请求。请求头包含：
服务端响应必须包含：
预检通过 → 浏览器才会发送实际请求
4. 响应阶段（浏览器怎么判断是否允许访问响应内容？）
无论是简单请求还是复杂请求，响应都必须包含：
否则 JS 无法读取响应体、状态码、header
5. 其他注意事项
Access-Control-Allow-Credentials: true 限制：
- 若请求设置了
credentials: 'include'，服务器必须加上该字段
- 此时
Access-Control-Allow-Origin不能为 `*` ，只能是具体域名
Access-Control-Expose-Headers
- 默认 JS 只能访问 6 个响应头
- 若要暴露自定义 header，需显式声明