Nginx配置CORS后前端还是报跨域错误怎么办？

码农彦森提问于 2026-03-09 22:27:16 阅读 11

工具

我在本地用React调后端API，后端部署在另一台服务器上。已经在Nginx里加了CORS头，但浏览器还是报跨域错误，不知道哪里没配对。

这是我的请求代码：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
.then(res => res.json())
.then(data => console.log(data));

Chrome控制台显示：Access to fetch at ‘https://api.example.com/data’ from origin ‘http://localhost:3000’ has been blocked by CORS policy… 看起来预检请求都没过，是不是Nginx漏了什么配置？

Nginx

我来解答赞 2 收藏

反馈

1 条解答

令狐维通 Lv1

这问题我太熟了，CORS配置经常让人头大。你这种情况多半是Nginx没处理好OPTIONS预检请求。

先确认你的Nginx配置里是不是少了这些关键项：

location / {

    if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';

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

        add_header 'Access-Control-Allow-Headers' 'Content-Type';

        add_header 'Access-Control-Max-Age' 86400;

        return 204;

    }

    

    add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';

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

    add_header 'Access-Control-Allow-Headers' 'Content-Type';

}

注意几个要点：
1. 必须单独处理OPTIONS方法
2. 允许的Origin要明确写出来，不能直接写*
3. 允许的Headers要包含你JS里面实际发送的header（这里是Content-Type）

另外检查下你fetch请求是不是没加credentials配置。如果是带cookie的请求，Nginx还要加：
add_header 'Access-Control-Allow-Credentials' 'true';
JS里面fetch要加：
credentials: 'include'

配完记得nginx -t测试配置，nginx -s reload重载。

2026-03-09 23:01