vue-cli3.0+node.js+axios跨域请求session不一样的问题

一.问题重述

使用的是，前后端分离，前端vue+axios请求，后端使用node搭建服务端接口，遇到的问题是，我通过登录接口吧数据存储型在session，我登录上以后，发现再次验证登录（另一个接口）的时候，

session变为空了，很纳闷为什么。

二.项目步骤，

前端部分的改动：

（1）vue使用vue/cli3搭建脚手架，一开始没有设置代理，各种不行，后来，设置proxy代理，

vue/cli3代理设置的方法：

　　在项目根目录新建一个文件夹（就是根目录新建就行了，官网这么说的）vue.config.js

　　里面的内容：

module.exports = {

　　　　devServer: {

　　// 设置代理

　　　　　　proxy: {

　　　　　　　'/app': {

　　　　　　　　// 目标 API 地址

　　　　　　　　　target: 'http://localhost:3000/',

　　　　　　　　// 如果要代理 websockets

　　　　　　　　　ws: true,

　　　　　　　　// 将主机标头的原点更改为目标URL

　　　　　　　　　changeOrigin: true,

　　　　　　　　//这个必须写啊。。。。（我也不知道为啥，不写就错了）

　　　　　　　　　pathRewrite:{

　　　　　　　　　　'^/app':""

　　　　　　　　　　}

　　　　　　　　}

　　　　　}

　　}

}

　　然后npm  run server  就好了，

　　请求这么写：axios.get("/app/api/userInfo/isLogin").then(res => {})

 

（2）现在还没改完呢:

　　// main.js文件下加上这两句

　　import axios from 'axios'

　　axios.defaults.withCredentials=true;

　

　　为啥加这个呢，因为axios请求里面，标准的跨域请求是不会发送cookie等用户认证凭据的。所以，当你再次访问远程api的时候，cookie是不会被带上的，于是乎，服务器理就不会找到同样的session。MDN上的简单介绍 credentials 。用XMLHttpRequest请求的时候，我们需要设置属性 withCredentials=true ;

node端部分的修改：

（1）// app.js里面加上允许跨域

app.use(function (req, res, next) {

　　res.header("Access-Control-Allow-Credentials", "true");

　　res.header('Access-Control-Allow-Origin', 'http://localhost:8080');

　　// res.header('Access-Control-Allow-Origin', '*');

　　res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

　　res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

　　if (req.method == 'OPTIONS') {

　　　　res.send(200); /*让options请求快速返回*/

　　} else {

　　　　next();

　　}

})

解释一下标蓝的三块意思：本来没有res.header("Access-Control-Allow-Credentials", "true");  这行的，但是不加的话，前端携带的cookie就过不来。两个接口请求的session还是不一样。

但是请求设置有个限制，一旦设置了res.header("Access-Control-Allow-Credentials", "true"，那么res.header('Access-Control-Allow-Origin', ‘*’);就会在前端报错。告诉你不能设置成*，

这个origin设置成*的目的是，允许所有的域来跨域访问数据。这个原因我也不知道为啥，但是可以设置多个，你要跨域的域名。我设置成了res.header('Access-Control-Allow-Origin', 'http://localhost:8080');这一块的解释，看这个小哥说的: https://blog.csdn.net/vincent_ling/article/details/51714691

这样前后端都改后，再次在前端两个不同的接口访问后端的req.session，存储的信息就会一样了。