目前我们公司项目在部分翻新,有一个项目是需要从安哥拉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



Logo

前往低代码交流专区

更多推荐