自己做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
代码在这:
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");
});