为什么我的POST请求没有发送自定义请求头？

诸葛星语提问于 2026-02-05 22:39:42 阅读 19

前端

我在用fetch发送POST请求时设置了请求头，但后端一直接收不到自定义的Authorization字段。简单GET请求没问题，但POST请求明明设置了headers参数，浏览器开发者工具里也显示请求头存在，但后端日志里完全没看到这个字段…

代码是这样的：


fetch('/api/data', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer xyz123',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => console.log(response.headers))
.catch(error => console.error('Error:', error));

试过把Content-Type去掉，或者把Authorization改成其他名字，结果还是不行。难道是浏览器自动过滤了某些头部？明明在Network面板里能看到请求头被发送了，但后端同事说根本没收到…

我来解答赞 3 收藏

反馈

2 条解答

夏侯景鑫 Lv1

这个问题大概率是CORS策略导致的，浏览器对跨域请求有严格的限制。简单说一下原因和解决方案。

在跨域的情况下，浏览器会先发送一个预检请求，也就是OPTIONS请求，来确认服务器是否允许你设置的这些自定义头部。如果你的服务器没有正确处理这个预检请求，或者没有明确允许Authorization这个自定义头部，那么即使你在前端代码里设置了，浏览器也会把它过滤掉，不会真正发送到后端。

解决方法分两步：前端和后端都要调整。

前端这边，你的代码本身没什么问题，但建议加上一个校验机制，确保请求头确实被设置成功了。比如这样：

fetch('/api/data', {

  method: 'POST',

  headers: {

    'Authorization': 'Bearer xyz123',

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({ key: 'value' })

})

.then(response => {

  if (!response.ok) {

    throw new Error('Network response was not ok');

  }

  return response.json();

})

.catch(error => console.error('Error:', error));

重点在后端，你需要确保服务器正确配置了CORS响应头。具体来说，需要在服务器返回的响应头里添加以下内容：

- Access-Control-Allow-Origin: 设置为允许的前端域名，比如https://your-frontend-domain.com，或者用*表示允许所有（但不推荐在生产环境这么做）。
- Access-Control-Allow-Headers: 这里必须明确包含你自定义的头部字段，比如Authorization。
- Access-Control-Allow-Methods: 确保包含POST方法。

举个例子，如果你用的是Node.js和Express，可以这么写：

const express = require('express');

const app = express();



app.use((req, res, next) => {

  res.header('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');

  res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');

  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  

  // 处理预检请求

  if (req.method === 'OPTIONS') {

    return res.sendStatus(204);

  }

  

  next();

});



app.post('/api/data', (req, res) => {

  // 你的业务逻辑

  res.json({ message: 'Success' });

});



app.listen(3000, () => console.log('Server running on port 3000'));

最后提醒一下，涉及到Authorization这种敏感信息的头部字段，一定要注意安全性。不要在非HTTPS环境下传输这类数据，避免被中间人攻击窃取。另外，后端接收到Authorization头部后，记得做严格的校验，防止伪造或恶意请求。

如果按照上面的方法调整后还是不行，可能是后端框架本身对请求头做了额外的限制，建议再仔细检查一下后端日志，看看有没有其他拦截规则在起作用。

2026-02-17 09:08

东旭 Lv1

这个问题我遇到过多次，大概率是CORS预检请求（preflight）导致的。你看到的请求头确实发出去了，但后端没收到，说明浏览器拦截了响应。

当你在fetch里加了自定义头Authorization，浏览器会先发一个OPTIONS请求做安全校验。如果后端没有正确响应这个OPTIONS请求，后面的POST请求就不会真正发送，或者说后端根本没处理到你的自定义头。

你试试看在fetch里加一个 credentials: 'same-origin' 或者 '*'，同时让后端设置好CORS响应头：

Access-Control-Allow-Origin: <你的域名>
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Authorization

如果你用的是Node.js/Express后端，可以这样简单加个中间件：

app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '你的前端域名');
res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');
res.header('Access-Control-Allow-Credentials', 'true');
if (req.method === 'OPTIONS') {
res.header('Access-Control-Allow-Methods', 'GET, POST');
return res.status(200).json({});
}
next();
});

这个问题前端这块没法单独解决，得前后端配合把CORS和preflight的逻辑对齐。

2026-02-05 23:04