Access-Control-Allow-Headers 为什么还是报错？

东方江梅提问于 2026-03-07 18:18:19 阅读 2

安全

我在前端用 fetch 发了个带自定义 header 的请求，比如 X-Requested-With，但浏览器一直报 CORS 错误，说 header 不被允许。

后端已经加了 Access-Control-Allow-Headers: X-Requested-With，但好像没生效？是不是还要配别的？

这是我的请求代码：

fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ foo: 'bar' })
})

我来解答赞 2 收藏

反馈

1 条解答

Dev · 宏赛 Lv1

碰到CORS问题确实挺烦的，我最近也踩过这个坑。你这种情况很可能是漏了几个关键配置，光配Access-Control-Allow-Headers还不够。

首先检查下后端配置，确保这三个header都加上了：
Access-Control-Allow-Headers: X-Requested-With, Content-Type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: 你的前端域名或者*

另外要注意，如果请求是带cookie的，还需要加：
Access-Control-Allow-Credentials: true

但安全起见，别直接用*通配符，最好指定具体域名。

还有个容易忽略的点：OPTIONS预检请求。你的fetch请求会先发个OPTIONS请求，后端必须正确处理。试试在后端加个OPTIONS路由，返回200和上面那些header。

如果是Nginx配置的话大概长这样：

add_header 'Access-Control-Allow-Origin' 'http://your-frontend.com';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type';

调试时可以先用Chrome开发者工具看下Network面板，确认预检请求的响应头是否正确。

2026-03-07 19:05