使用有效API Key发起fetch POST请求时出现401未授权异常

核心问题 #

你设置的mode: 'no-cors'是导致认证失败的关键。在该模式下，浏览器会强制过滤掉所有非CORS安全的请求头，包括你自定义的x-api-key，这就解释了为什么后端接收不到认证Key，返回401错误。而且no-cors模式下，你甚至无法获取到真实的响应内容（只能拿到opaque response）。

修复步骤 #

• 移除mode: 'no-cors'配置
  浏览器默认的cors模式会自动处理跨域请求，只要后端配置了正确的CORS规则（允许x-api-key请求头、允许你的源访问），就能正常发送自定义头。

• 调整请求体格式（可选）
  你现在把FormData转成了JSON字符串，但如果后端期望接收multipart/form-data格式，直接传FormData即可，不需要转JSON：

  const formData = new FormData(thisForm);
  fetch('api url', { 
      method: 'POST',
      headers: { 
          'x-api-key': 'API_KEY'
      },
      body: formData
  }).then(response => {
      return response.text()
  }).then((data) => {
      console.log(data)
  }).catch((error) => {
      console.error(error)
  })
  

  如果后端确实需要JSON格式，保留原有的JSON转换逻辑即可，但要确保后端能正确解析JSON请求体。

• 确认后端CORS配置
  让后端检查CORS设置，确保：

  • 允许你的前端域名（Origin）发起请求
  • 允许x-api-key作为请求头（在Access-Control-Allow-Headers中添加该字段）
  • 允许POST方法（在Access-Control-Allow-Methods中包含POST）

验证方式 #

修改代码后，打开浏览器开发者工具的Network面板，查看请求的Request Headers，确认x-api-key是否存在。如果能看到该头，说明配置生效，后端应该能正常接收并通过认证。

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