vue + node.js项目，使用axios请求服务器后，vue组件刷新session丢失

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

自己做vue项目时出现的问题：登陆完成后，服务器保存了session信息，consule.log输出req.session也有登陆信息，但是登陆完切从登陆页面切换会主页面时，显示我未登陆（后端是我自己写的，加了个登陆验证）

报错原因

开发环境中前后端分离端口号不同导致跨域问题，跨域请求时，每次axios请求都是新的session，而不是刚才登陆时服务器保存的session，所以显示未登录

解决方法

使用axios发送请求时必须携带Cookie给服务器

一. vue项目中的入口JS文件main.js加上：

axios.defaults.withCredentials = true

import Vue from "vue";
import APP from "./app.vue";
axios.defaults.withCredentials = true

二. Node服务端解决跨域的请求头中加： res.header("Access-Control-Allow-Credentials", "true");

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

注意这里：Node服务器解决跨域时，不能用 * 允许所有地址访问服务器，一定要用当前项目的前端页面地址，比如我的是http://localhost:8080

如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

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

下面是我自己配置的Vue项目入口JS文件和Node服务器的入口JS文件，仅供参考

Vue：

import Vue from "vue";
import APP from "./app.vue";
import router from './router'
import store from './store'
axios.defaults.withCredentials = true

new Vue({
  el: "#app",
  router,
  store,
  template: "<APP/>",
  components: { APP },
});

Node：

const express = require("express");
const router = require("./router");
const session = require("express-session");
const bodyParser = require("body-parser");

const app = express();

app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:8080");
  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");
  res.header("X-Powered-By", " 3.2.1");
  res.header("Content-Type", "application/json;charset=utf-8");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

app.use(router);

app.listen(3000, () => {
  console.log("............qidongzhong");
});