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;