location /joinus { # 允许跨域请求的“域”,有些请求不允许* add_header 'Access-Control-Allow-Origin' $http_origin; # 允许客户端提交Cookie add_header 'Access-Control-Allow-Credentials' 'true'; # 允许客户端的请求方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'; # 允许客户端提交的的请求头 add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers; # 允许客户端访问的响应头 add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma, satoken'; # 处理预检请求 if ($request_method = 'OPTIONS') { # 预检请求缓存时间 add_header 'Access-Control-Max-Age' 1728000; add_header 'Access-Control-Allow-Origin' $http_origin; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'; # 允许客户端提交的的请求头 add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers; # 允许客户端访问的响应头,根据自己实际需要添加,比如我用到了satoken就加入了对应的header add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma, satoken'; add_header 'Content-Length' 0; add_header 'Access-Control-Allow-Credentials' 'true'; return 204; } #关闭重定向,如果出现POST变GET的情况,请务必加上此句。 proxy_redirect off; proxy_pass http://127.0.0.1:8099; }
尤其注意if语句,如果你在if语句里直接return,if外面的add_header会失效,这样导致虽然浏览器的OPTIONS请求正常,但是带上token之类的header,请求就会直接CORS错误。不少其他网络资料都没有提到这点。
经过测试解决springboot和vue之间跨域通信的问题。
前端通过nginx解决跨域也可以,这样会更简单一些。