使用fetch()携带Bearer Token并设mode: 'no-cors'返回401的问题排查

核心问题出在mode: 'no-cors'这个配置上：

• 当fetch设置mode: 'no-cors'时，浏览器会严格遵循CORS规则，自动过滤掉非安全的请求头（比如你设置的Authorization头）。这就导致你的请求实际上根本没有携带Token发送到API，所以返回401未授权错误。
• curl是命令行工具，不受浏览器的CORS策略限制，所以能正常携带所有请求头并得到正确响应。

修复步骤 #

1. 移除mode: 'no-cors'配置
   fetch默认使用cors模式，这是浏览器跨域请求的正确模式。修改后的代码如下：

   const url = `https://......`
   
   console.log('DEBUG TOKEN', `Bearer ${token}`) // is correct
   const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       Authorization: `Bearer ${token}`,
     },
     body: JSON.stringify(postString),
   })
   

2. 确保API服务器配置了正确的CORS响应头
   如果目标API是你自己维护的，需要在服务器端添加以下CORS响应头：

   • Access-Control-Allow-Origin: 设置为你的前端域名（生产环境不建议用*）
   • Access-Control-Allow-Headers: 必须包含Authorization和Content-Type，例如Access-Control-Allow-Headers: Content-Type,Authorization
   • 如果是第三方API，若对方未配置CORS头，可通过前端代理（如项目配置本地代理）或Nginx反向转发的方式绕过跨域限制

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