React+NodeJS部署到render.com后认证头无法到达服务器

1. 优先修正CORS配置的域名范围 #

你当前的CORS仅允许http://localhost:8000跨域，但部署到render.com后前端域名已变更，浏览器会拦截携带自定义头（如Authorization）的跨域请求——哪怕你在Chrome开发者工具里看到请求带了头，只要预请求（OPTIONS）被拒绝，服务器根本收不到后续的实际请求。

更新后端CORS配置，将部署后的前端域名加入允许列表，同时明确放行Authorization头：

const cors = require('cors');

const corsOptions = {
  origin: ['http://localhost:8000', 'https://your-frontend-domain.onrender.com'],
  credentials: true,
  allowedHeaders: ['Authorization', 'Content-Type']
};

app.use(cors(corsOptions));

如果需要适配多环境，可通过环境变量管理允许的域名列表。

2. 确认服务器端读取请求头的大小写 #

Node.js会自动将所有请求头转为小写，如果你在代码中用req.headers.Authorization（首字母大写）读取，会获取不到值，必须使用req.headers.authorization。

可以在服务器端添加中间件打印全部请求头，确认字段是否存在：

app.use((req, res, next) => {
  console.log('Received headers:', req.headers);
  next();
});

3. 检查前端请求的跨域凭证配置 #

Render部署的服务默认使用HTTPS，浏览器对HTTPS环境下的跨域请求凭证要求更严格。确保前端请求时配置正确的凭证参数：

• 使用fetch时，添加credentials: 'include'：

  fetch('https://your-backend.onrender.com/api/data', {
    headers: {
      'Authorization': `Bearer ${yourJwtToken}`
    },
    credentials: 'include'
  });
  

• 使用axios时，设置withCredentials: true：

  axios.get('https://your-backend.onrender.com/api/data', {
    headers: {
      'Authorization': `Bearer ${yourJwtToken}`
    },
    withCredentials: true
  });
  

4. 排查平台反向代理的潜在影响 #

虽然Authorization是HTTP标准头，但偶尔平台反向代理会有特殊处理。你提到Postman请求部署后的后端接口正常，说明后端逻辑本身没问题，问题大概率还是浏览器的跨域拦截机制导致的，优先解决前三点即可。

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