frontend-interview-playbook

Appearance

CORS 与跨域：同源策略、预检、凭证模式与缓存影响 ​

主题边界 ​

  • 跨域问题本质上是浏览器同源策略限制脚本读取非同源响应，而不是网络层根本发不出请求。
  • CORS 是服务端通过响应头显式授权浏览器：哪些源、哪些方法、哪些头、是否允许凭证，可以暴露给前端脚本。

机制与流程 ​

  • 简单请求满足方法、头部和内容类型约束时，浏览器可直接发真实请求，再根据响应头决定结果是否可被脚本读取。
  • 非简单请求会先发预检 OPTIONS，请求头里的 Access-Control-Request-Method 和 Access-Control-Request-Headers 告诉服务端后续真实请求意图。
  • 服务端返回 Access-Control-Allow-Origin、Allow-Methods、Allow-Headers、Allow-Credentials 等条件满足后，浏览器才会继续或暴露真实响应。

关键差异 ​

  • 同源代理、服务端转发和 CORS 头是三种完全不同的处理方式；前两者绕过浏览器限制，后者是显式授权。
  • credentials: 'include' 会影响 Cookie 等凭证是否随请求发送，同时要求服务端允许凭证且不能把 Allow-Origin 设为 *。

边界条件 ​

  • 后端返回 200 并不代表前端就能拿到数据；如果 CORS 头不对，浏览器仍会拦截响应暴露。
  • CORS 控制的是浏览器脚本读取权限，不等于真正的身份鉴权或接口授权。

工程落点 ​

  • 预检失败、凭证模式错误、响应头遗漏和代理层吞掉 CORS 头，是前后端联调最常见的问题源。
  • 如果能顺带讲到预检缓存、Vary: Origin 和网关/CDN 改写头部，已经超出基础层。

相关主题 ​