express解决前端跨域请求session失效问题

1,188 阅读1分钟

用express框架在做登录、注册时候,当请求跨域的时候发现session的值会失效,导致缓存后的session值一直是undefined。

原因:因为session原则上是需要cookie支持的,而跨域请求时,客户端不会携带本地的cookie发出请求,导致session不会缓存下来,每次发出请求后都会生成一个新的session。

解决办法:

  1. 异步请求(ajax/axios)添加xhrFields:{withCredentials:true},表示跨域请求时允许携带cookie。

    // ajax全局配置
    $.ajaxSetup({
        xhrFields:{withCredentials:true}
    });// axios全局配置
    axios.defaults.withCredentials = true
    
  2. 服务端的响应头需要设置成Access-Control-Allow-Credentials = true来运行客户端携带证书式访问(注:当响应头Access-Control-Allow-Credentials设置成true时,对应的响应头Access-Control-Allow-Origin 的值不能为*,需要设置成客户端的地址)。

    var express = require('express');
    var session = require('express-session');
    
    var app = express();
    app.all('*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "http://127.0.0.1:3005");//前端域名
        res.header("Access-Control-Allow-Credentials",'true');
        res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        next();
    });
    
    // 如果使用了cores 插件
    var cors = require('cors')
    app.use(cors({
        credentials: true,
        origin: "http://127.0.0.1:3005",
        methods: "PUT,POST,GET,DELETE,OPTIONS", }))