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;