Express、axios、cookie的使用以及踩坑

Express、axios、cookie的使用以及踩坑

后端环境：

1. Express （NodeJs 框架）
2. Mongodb（Mongodb数据库）
3. mongoose（操作Mongodb数据库的第三方模块）
4. body-parser（post 请求依赖）
5. express-session（使用 cookie 以及 session 依赖第三方模块）

前端环境： axios
步入正题

1. 安装相应模块

yarn add express body-parser express-session mongoose 

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "*");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(
  session({
    secret: "session xkc",  // secret的值可随意
    saveUninitialized: true,
    resave: true,
    cookie: { maxAge: 3600*1000*6 },
  })
);

mongodb数据库这里不做演示

3. 对 post 接口请求到的数据存放到 session 中

admin.post("/login", async (req, res) => {
  // 由于查询数据库 user 集合
  let user = await User.findOne();
  let { username, password } = req.body;
  // 验证密码
  let bool = bcrypt.compareSync(password, user.password);

  if (bool && username === user.username) {
  	// 向 session 中增加数据: req.session.name名字 = 需要存放在session 中的数据
    req.session.username = user.username; 
    res.status(200);
    return;
  } else {
    console.log("登录失败");
    return;
  }
});

对于不太了解 async await ES2017 新增函数的同学，可浏览阮老师的 ES6教程

4. 正常情况下，前端发送 post ‘/login’ 请求后，再次进入页面后， 再控制台 application 下的 cookie 会有对应的 cookie 数据，但是实际情况却没有任何数据
5. 此处遇到坑的原因是：axios默认情况下，标准的跨域请求是不会发送 cookie 等用户认证凭据的因此，axios 中的withCredentials属性默认为 false， 只需设置为 true即可 。

import axios from "axios";

// 封装 axios 方法，返回值是 Promise
export function request(options) {
  return new Promise((resolve, reject) => {
    // 创建 axios 实例
    const instance = axios.create({
      baseURL: "http://localhost:8888",
      timeout: 5000,
    });

    // 响应拦截器
    instance.interceptors.response.use((res) => {
      // console.log(res.data);
      if (res.status === 200) {
        // console.log(res);
        return res.data;
      } else {
        // console.log(res);
      }
    });

    // 请求拦截器
    instance.interceptors.request.use((config) => {
      // console.log(config);
      return config;
    });

    // 允许存储cookie
    instance.defaults.withCredentials = true;  // 新增

    // 通过实例进行网络请求
    instance(options)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

6. 这时候可以发现cookie出现了，当时跨域请求出现了问题。需要设置后端的跨域设置

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://127.0.0.1:3000"); // 特别注意：此处的http://127.0.0.1:3000需要更换为你自己客户端url
  res.header("Access-Control-Allow-Credentials", "true"); // 特别注意：新增这行代码
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "*");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

这时候你会发现，问题解决了