Vue和服务端交互的跨域以及Header设值问题解决
目前我们公司项目在部分翻新,有一个项目是需要从安哥拉1翻新到Vue,翻新过程中碰到了不少的坑,第一个就是跨域问题,其实网上很多资料都有说明Vue跨域问题的解决方式,但是我们采用的是一种一劳永逸的方式,直接去修改Nginx的配置,详细配置看下面即可:if ($request_method = 'OPTIONS') {add_header 'A...
·
目前我们公司项目在部分翻新,有一个项目是需要从安哥拉1翻新到Vue,翻新过程中碰到了不少的坑,第一个就是跨域问题,其实网上很多资料都有说明Vue跨域问题的解决方式,但是我们采用的是一种一劳永逸的方式,直接去修改Nginx的配置,详细配置看下面即可:
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Access-Control-Allow-Headers' 'token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-C$
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Expose-Headers' 'token';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-C$
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Expose-Headers' 'token';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-C$
}
因为Vue在实际发送请求道服务端接口前,会先发送一个options请求进行验证,针对这类请求我们不需要实际返回和跳转,所以交互完成后我们配置的是返回204状态码,POST和GET请求配置则是针对实际请求进行的
而当我们需要和前端交互传递Header值的时候需要加上:Access-Control-Allow-Headers
如果是服务端在接口完成后需要返回自定义的Header,那么如果Vue需要能接收到的话,那么Nginx还需要加入
Access-Control-Expose-Headers
更多推荐
已为社区贡献1条内容
所有评论(0)