关于浏览器跨域的一些知识点

本文总结了浏览器中 Axios 和 Fetch 发起跨域请求时，Cookie 与 token 的发送策略、CORS 控制机制、常见问题与正确配置方法。

---

一、Axios 与 Fetch 的跨域凭证设置

🔸 Axios 的 withCredentials

axios.get('https://example.com/api', {
  withCredentials: true
})

• 默认值：false
• 设为 true 后：
  • 可以在跨域请求中发送 Cookie
  • 需要后端响应头：Access-Control-Allow-Credentials: true

---

🔸 Fetch 的 credentials

fetch('https://example.com/api', {
  credentials: 'include'
})

• 可选值：

  值	说明
  'omit'	默认值，不带 Cookie
  'same-origin'	同源带 Cookie，跨域不带
  'include'	不论是否跨域都带 Cookie

---

🔸 后端响应头要求

若希望前端携带 Cookie，必须在响应中添加：

Access-Control-Allow-Origin: https://前端域名
Access-Control-Allow-Credentials: true

• ⚠️ Access-Control-Allow-Origin 不能为 "*"！

---

二、Cookie 是否自动携带？支持跨域吗？

场景	是否自动携带 Cookie
同源	✅ 是
子域间	✅ 是（要求 Cookie 设置了 Domain）
完全跨域	❌ 否（需手动配置）

要想跨域带 Cookie，需满足：

• 前端：
  • Axios：withCredentials: true
  • Fetch：credentials: 'include'
• 后端响应：
  • Access-Control-Allow-Origin: 指定域名
  • Access-Control-Allow-Credentials: true
• Cookie 设置：SameSite=None; Secure

---

三、Authorization Header 是否也受跨域控制？

✅ 结论：

• Authorization 是开发者设置的 Header，不像 Cookie 是浏览器自动带的。
• 属于 "非简单请求" ，会触发 预检请求（OPTIONS）。
• 服务端需在 CORS 响应中允许该 Header，否则跨域失败。

---

🔸 示例：携带 Authorization 的 Fetch 请求

fetch('https://api.example.com/user', {
  headers: {
    Authorization: 'Bearer xxx'
  }
})

浏览器会自动发送一条预检请求：

OPTIONS /user
Access-Control-Request-Headers: authorization

---

❌ 若服务端未允许该 Header（错误设置）：

Access-Control-Allow-Headers: x-token

浏览器将拦截，控制台报错：

Access to fetch at ... from origin ... has been blocked by CORS policy

---

✅ 正确设置方式：

Access-Control-Allow-Headers: Authorization

或支持多个 Header：

Access-Control-Allow-Headers: Authorization, x-token, Content-Type

建议写成 Authorization 首字母大写，保持规范。

---

四、总结对比表格

项目	Cookie	自定义header
设置方式	浏览器自动管理（响应 Set-Cookie）	开发者手动设置
默认跨域发送	❌ 否	✅ 是（但需通过预检）
是否触发预检	✅ 会	✅ 会
是否需后端响应头允许	✅ Access-Control-Allow-Credentials	✅ Access-Control-Allow-Headers: Authorization

---

五、什么时候会触发预检（preflight）？

在跨域的情况下 如果请求满足下面任一条件，就会触发 CORS 预检请求（OPTIONS）

使用了自定义请求头，如：

• Authorization
• X-Token
• X-Custom-Header 等

使用了非简单的 HTTP 方法，如 PUT、DELETE、PATCH

使用了非标准的 Content-Type，如 application/json（除了默认的 text/plain、multipart/form-data、application/x-www-form-urlencoded）