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数据库这里不做演示

1. 对 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教程

1. 正常情况下，前端发送 post ‘/login’ 请求后，再次进入页面后， 再控制台 application 下的 cookie 会有对应的 cookie 数据，但是实际情况却没有任何数据
2. 此处遇到坑的原因是：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);
});
});
}

1. 这时候可以发现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();
});

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