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

由于后端需要通过请求取前端中的cookie信息，在本地开发模式中，直接请求接口，后端无法拿到前端cookie数据，

经测试需在 vue-cli 中使用代理，如果使用Nginx做反向代理需同时修改Nginx配置如下：

一、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刷新报错
      }
    }
  },

 

二、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;