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

自己做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");
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值