vue中fetch跨域丢失session的解决方案

先看一个简单的api

该 api 只有一个功能，返回一个随机数的session。

var hashfish = require("hashfish");
const express = require('express');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var session = require('express-session');
const app = express();
app.use(bodyParser.json());
app.use(cookieParser());
app.use(session({
    secret: 'secret', // 对session id 相关的cookie 进行签名
    resave: true,
    saveUninitialized: false, // 是否保存未初始化的会话
    cookie: {
        maxAge: 1000 * 100, // 设置 session 的有效时间，单位毫秒
    },
}));
app.get('/api/random', (req, res) => {
    if (!req.session.random) {
        req.session.random = hashfish.random();
    }
    res.json(req.session.random);
});

但是问题来了。在vue的跨域中，session会丢失。而在postman中测试却没问题。这个问题调了2天，终于找到一个方法，安装cors中间件：

npm install --save cors

增加代码：

var cors = require('cors');
var corsOptions = {
    origin: 'http://localhost:8080',
    credentials:true,
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
  }
app.use(cors(corsOptions));

相应地，fetch中也要增加：

credentials: "include",
mode: "cors",

即：

const url = `http://localhost:3000/api/random`;
    fetch(url, {
      method: "GET",
      credentials: "include",
      mode: "cors",
      headers: new Headers({
        "Content-Type": "application/json"
      })
    })
      .then(res => res.json())
      .catch(error => console.log("Error:", error))
      .then(response => {
        console.log("random:", response);
      });

这样，session就不丢失了。