使用fetch带Authorization头请求本地Express接口报错Failed to fetch求助

问题原因 #

不携带请求头时请求正常，添加Authorization头后请求失败，核心原因是带自定义头的GET请求属于非简单请求，浏览器会自动发起OPTIONS预检请求校验跨域规则，你的Express后端未配置对应CORS规则处理预检请求和允许Authorization头，导致预检直接失败，抛出TypeError: Failed to fetch错误。

排查步骤 #

• 打开浏览器开发者工具的「网络」面板，刷新页面复现请求，查看是否存在状态码异常的OPTIONS类型请求，同时查看控制台是否有明确的CORS跨域报错，可直接确认问题根因。
• 打印请求头确认Authorization格式是否正确，检查accessToken.accessToken是否为有效值，避免出现Bearer undefined这类非法请求头格式。

解决方案 #

方法1：使用cors包快速配置（推荐） #

先安装依赖：
npm install cors

在Express入口文件中添加配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置跨域规则
app.use(cors({
  origin: '你的前端服务地址，例如http://localhost:5173', // 禁止填写通配符*，否则带凭证的请求会失效
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  credentials: true
}));

方法2：手动编写跨域中间件 #

如果不想引入第三方依赖，可以直接添加全局中间件处理跨域：

app.use((req, res, next) => {
  // 配置允许访问的前端源，必须为具体地址，不能写*
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');
  // 配置允许的请求头，必须包含Authorization
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 配置允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, 'POST', 'PUT', 'DELETE', 'OPTIONS');
  // 预检请求直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

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