请求头没带上 cookie,响应头 set-cookie 无效解决方案

518 阅读1分钟

一般这种情况只发生在非同源项目,即网页和接口不同源。要解决这种情况一般需要在请求头里配置

问题

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,  
    })  
}

参考

developer.mozilla.org/zh-CN/docs/…