一般这种情况只发生在非同源项目,即网页和接口不同源。要解决这种情况一般需要在请求头里配置
问题
1. 请求头没带上 cookie
在 axios 中一般要配置withCredentials为 true,这样发送的请求就会带上 cookie
2. 响应头 set-cookie 无效
处于安全限制,非同源接口,浏览器会阻止 js 获取响应头里的 set-cookie 字段。
解决方案
后端
part of app.js
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Origin", "http://localhost:5173");
next();
});
app.use('/', indexRouter);
app.use('/user', usersRouter);
user.js
var express = require('express')
var router = express.Router()
router.post('/', function (req, res, next) {
res.cookie('name', 'express')
res.send(JSON.stringify({ name: 'Express' }))
})
module.exports = router
前端
const fetchData = async () => {
const res = await axios({
method: 'post',
url: 'http://localhost:3000/user',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
})
}