爱站程序员基地Express、axios、cookie的使用以及踩坑
后端环境：
- Express （NodeJs 框架）
- Mongodb（Mongodb数据库）
- mongoose（操作Mongodb数据库的第三方模块）
- body-parser（post 请求依赖）
- express-session（使用 cookie 以及 session 依赖第三方模块）
前端环境： axios
步入正题
- 安装相应模块
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数据库这里不做演示
- 对 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教程
- 正常情况下，前端发送 post ‘/login’ 请求后，再次进入页面后， 再控制台 application 下的 cookie 会有对应的 cookie 数据，但是实际情况却没有任何数据
- 此处遇到坑的原因是：axios默认情况下，标准的跨域请求是不会发送 cookie 等用户认证凭据的因此，axios 中的withCredentials属性默认为 false， 只需设置为 true即可 。
import axios from \"axios\";// 封装 axios 方法，返回值是 Promiseexport 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;});// 允许存储cookieinstance.defaults.withCredentials = true; // 新增// 通过实例进行网络请求instance(options).then((res) => {resolve(res);}).catch((err) => {reject(err);});});}
- 这时候可以发现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需要更换为你自己客户端urlres.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();});
这时候你会发现，问题解决了
