Vue和服务端交互的跨域以及Header设值问题解决

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