Nginx 跨域 add_header 403状态下无效

双面人

发布于 2020-07-29 15:50:27

4.2K1

发布于 2020-07-29 15:50:27

文章被收录于专栏：热爱IT热爱IT

WEB前后端分离的应用，前端跨域请求API服务器。这是前要。

当然，一开始直接上，js报报一堆 No 'Access-Control-Allow-Origin' header 的错误，那很明显了，nginx允许跨域的关键，使用add_header函数添加头即可。整理代码如下，添加在 location 节点

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' '1000';
add_header 'Access-Control-Allow-Methods' "POST, GET, OPTIONS, DELETE, PUT";
add_header 'Access-Control-Allow-Headers' "x-requested-with, Content-Type, origin, authorization, accept, client-security-token";

前端妹子测试，一切安好。

当然啦，问题肯定要来了，不然不在这里废话了。

一个表单验证，服务器返回422，并提示相应的错误信息。前端是死活无法显示。js报错如下：

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.10.20.154:3000' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

也很好理解，没有跨域权限嘛。但是不对嘛，nginx 明明已经配置了。

仔细检查 POST 的记录，发现 Response Headers 没有 Access-Control那一堆。当然了，解决方法是有的，官方也给出了解释。只有在状态码是 200,201,204,302.....的情况下，才有效。除非你使用always关键字。

add_header解释

最终nginx配置成下边的样子，解决问题。

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Max-Age' '1000' always;
add_header 'Access-Control-Allow-Methods' "POST, GET, OPTIONS, DELETE, PUT" always;
add_header 'Access-Control-Allow-Headers' "x-requested-with, Content-Type, origin, authorization, accept, client-security-token" always;

Apache很好，在应用根目录下的 .htaccess 文件，贴入下内容即可：

Header always set Access-Control-Allow-Origin *
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, origin, authorization, accept, client-security-token"

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

nginx