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

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


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

🔸 Axios 的 withCredentials

js 复制代码
axios.get('https://example.com/api', {
  withCredentials: true
})
  • 默认值:false
  • 设为 true 后:
    • 可以在跨域请求中发送 Cookie
    • 需要后端响应头:Access-Control-Allow-Credentials: true

🔸 Fetch 的 credentials

js 复制代码
fetch('https://example.com/api', {
  credentials: 'include'
})
  • 可选值:

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

🔸 后端响应头要求

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

http 复制代码
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 请求

js 复制代码
fetch('https://api.example.com/user', {
  headers: {
    Authorization: 'Bearer xxx'
  }
})

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

http 复制代码
OPTIONS /user
Access-Control-Request-Headers: authorization

❌ 若服务端未允许该 Header(错误设置):

http 复制代码
Access-Control-Allow-Headers: x-token

浏览器将拦截,控制台报错:

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


✅ 正确设置方式:

http 复制代码
Access-Control-Allow-Headers: Authorization

或支持多个 Header:

http 复制代码
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 方法,如 PUTDELETEPATCH

使用了非标准的 Content-Type,如 application/json(除了默认的 text/plainmultipart/form-dataapplication/x-www-form-urlencoded

相关推荐
笨笨狗吞噬者6 分钟前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在6 分钟前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go
snows_l12 分钟前
JavaScript 性能优化实战大纲
前端
文心快码BaiduComate24 分钟前
文心快码3.5S开发古风射覆小游戏,它帅到我了!
前端·后端·程序员
佛系菜狗1 小时前
防抖和节流-防抖鸿蒙版本实现
前端
不一样的少年_1 小时前
老板问我:AI真能一键画广州旅游路线图?我用 MCP 现场开图
前端·人工智能·后端
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
恋猫de小郭1 小时前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter
性野喜悲1 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
wangdaoyin20102 小时前
UniApp 在手机端(Android)打开选择文件和文件写入
android·前端·uni-app