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

Mr-美美提问于 2026-03-31 07:01:15 阅读 3

工具

我在本地开发时用 Vue 调用公司测试服务器的 API，一直被 CORS 拦截。明明已经在 Nginx 里加了跨域头，但浏览器控制台还是报错：「has been blocked by CORS policy」。我试过加 add_header Access-Control-Allow-Origin *;，也重启了 Nginx，但没用。

这是我的 Nginx 配置片段：

location /api/ {
    proxy_pass http://backend;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}

是不是漏了什么？为什么 OPTIONS 请求还是失败？

我来解答赞 7 收藏

反馈

1 条解答

皇甫恩宇 Lv1

看起来你确实漏了一点东西。CORS配置里 OPTIONS请求需要特别处理，因为它是个预检请求。Nginx对OPTIONS请求需要返回200状态码，并且要包含正确的头信息。

在现有基础上加个 if 判断来处理 OPTIONS 请求会更好：

location /api/ {

    if ($request_method = 'OPTIONS') {

        add_header Access-Control-Allow-Origin *;

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

        add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        return 204;

    }

    proxy_pass http://backend;

    add_header Access-Control-Allow-Origin *;

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

    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

}

这个写法更优雅些，把OPTIONS请求单独拿出来处理。记得重启Nginx后应该就能解决了。我之前也被这问题折腾过，花了好几天才搞明白。

顺便说下，虽然用了通配符*很方便，但生产环境最好指定具体的域名来源，不然会有安全隐患。

2026-03-31 07:02