Vue-cli项目在开发环境下跨域请求失败的解决方法

最近在进行毕业设计的开发,采用了Express+Vue的前后端分离
结构.并使用了基于webpack的vue-cli脚手架工具.前两天在开发用户权限模块时,发现session丢失状况,导致登录状态无法保持. 以下是发现问题的过程

1. 登录后发现已经保存的session值丢失
2. 发现登录后的请求对应的sessionId与登录请求中的sessionId不同.
3. 查看http请求内容后发现,登录之后的请求中并没有包含cookies
4. 在浏览器中查看Cookies文件,发现随着之前登录请求的相应存储在浏览器中的Cookies记录,其Origin值并非服务端的域,而是客户端的域.

至此发现问题.其实我们使用的构建工具便相当于一个服务器,对于http请求这个服务器进行了代理,于是所存储的Cookies的域便是客户端的域而不是服务端的域.在之后的请求中,浏览器在Cookies记录中并没有发现与请求域相匹配的Cookies记录,自然没有在请求中携带任何Cookies信息.服务端便会为这次请求创建新的session,自然就访问不到之前存储的session了.

解决这个问题有两种方案:
1. 在服务端res对象中单独设置Header,指定客户端的域:

res.header(“Access-Control-Allow-Credentials”,”true”);
res.header(“Access-Control-Allow-Origin”,”http://localhost:8086“);

2.通过配置地址映射表
在config/index.js中,将dev.proxyTable这一项的值设置为引入的地址映射表:

//proxy.js
module.exports = {
 proxy: {
    '/login': { 
      target: 'http://127.0.0.1:8082',
      changeOrigin: true, 
      pathRewrite: {
        '^/login': '/login'  
      }
    }
 }
}

该表的作用是将/login直接映射到http://127.0.0.1:8082/login.其中参数changeOrigin:true会使得本地会虚拟一个代理服务接收请求并代你发送该请求,从而解决跨域问题.