使用Fetch携带Authorization Header及CORS相关问题求助

我来帮你排查下这个问题，核心问题大概率出在你设置的mode: 'no-cors'上——这个模式会限制浏览器发送任何非简单请求头，而Authorization恰好属于非简单头，所以浏览器会直接忽略它，根本不会发送出去。

下面给你几个具体的解决方向：

• 立即移除mode: 'no-cors'配置：如果你的请求是跨域的，正确的做法是让目标API服务器配置CORS允许自定义头（比如Access-Control-Allow-Headers: Authorization），同时响应OPTIONS预检请求。no-cors本质是让浏览器静默失败，完全不适合需要自定义头的场景。
• 确认请求头的写法是否正确：Fetch的headers配置要注意，要么用对象字面量，要么用Headers构造函数，比如：

  // 写法1：对象字面量
  fetch('https://api.example.com/game/data', {
    method: 'GET', // 或POST等其他方法
    headers: {
      'Authorization': 'Bearer YOUR_TOKEN_HERE',
      'Content-Type': 'application/json' // 如果是POST请求需要发送JSON的话
    },
    credentials: 'include' // 只有当需要携带Cookie时才需要，和Authorization头无关
  })
  
  // 写法2：Headers构造函数
  const headers = new Headers();
  headers.append('Authorization', 'Bearer YOUR_TOKEN_HERE');
  fetch('https://api.example.com/game/data', {
    method: 'GET',
    headers: headers,
    credentials: 'include'
  })
  

• 检查是否存在浏览器扩展或代理干扰：有些广告拦截、隐私类浏览器扩展会自动移除Authorization头，你可以尝试在隐身模式下测试请求，排除这类干扰。
• 查看浏览器控制台的网络请求详情：打开开发者工具（F12），切换到Network面板，找到你的请求，查看Request Headers部分，确认是否真的没有Authorization头。如果是跨域请求，先看是否有OPTIONS预检请求失败的情况——如果预检失败，浏览器根本不会发送后续的实际请求。

另外补充一点：credentials: 'include'只负责携带Cookie信息，和Authorization头的发送没有直接关系，所以如果你的请求不需要Cookie，可以去掉这个配置，避免不必要的混淆。

内容的提问来源于stack exchange，提问作者Steven R