vue-cli3.0本地代理cookie跨域请求Nginx配置

因为后端须要经过请求取前端中的cookie信息，在本地开发模式中，直接请求接口，后端没法拿到前端cookie数据，

经测试需在 vue-cli 中使用代理，若是使用Nginx作反向代理需同时修改Nginx配置以下：

1、vue-cli配置

 首先在vue.config.js中加入代理配置：

devServer: {     port: 3000,     open: true,     overlay: {       warnings: false,       errors: true     },     proxy: {       '/': { //代理的请求           target: 'http://x.x.x.x',//代理的目标地址           changOrigin: true,         //开启代理：在本地会建立一个代理服务，而后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
          ws: false,
　　　　　//关闭ws代理，代理所有请求时开启时，ws会致使webpack刷新报错       }     }   },

 

2、Nginx配置

这里nginx作反向代理在Nginx.conf中加入如下配置：

add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Cookie"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; proxy_set_header X-Real-IP $remote_addr; add_header 'Access-Control-Allow-Credentials' true; proxy_set_header Cookie $http_cookie;