[英]Cookie in Set-Cookie header not being set
我正在使用 axios 从 reactjs 客户端向 node.js 服务器发送请求,如下所示。
import axios from 'axios';
const apiClient = axios.create({
withCredentials: true,
baseURL: 'http://localhost:8080'
});
async function(payload) {
try {
debugger;
let result = await apiClient.post('/auth/signup/', payload);
debugger;
return result;
} catch (error) {
debugger;
throw error;
}
}
node.js 端点在响应中设置一个 cookie,如下所示。
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser')
const cors = require('cors');
const jwt = require('jsonwebtoken');
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: true }));
router.use(cors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag']} ));
router.use(cookieParser());
router.post('/signup', async (req, res, next) => {
debugger;
let database = req.app.locals.database;
try {
let user = await database.findByUsername(req.body.username);
let token = await jwt.sign({username: user.username}, config.secret, {expiresIn: "15m"});
res.cookie('jwt', token, {
maxAge: 900,
});
} catch (error) {
debugger;
return res.status(503).send({ auth: false, message: 'Database error.' });
}
});
响应的 Set-Cookie header 包含预期的 cookie。
但是,Chrome 似乎没有设置 cookie,因为我在开发人员控制台的应用程序 window 中看不到 cookie。
我查看了以下问题的答案,其中提到在 axios 配置中设置{ withCredentials: true }
并且不使用 cors 的通配符来源 Z28A3689BE95C88DD4E7A37DB516AB0
Set-Cookie header 未在 Chrome 中设置 cookie
关于为什么未设置 cookie 以及如何解决此问题的任何想法?
这是我对类似问题https://stackoverflow.com/a/62821342/8479303的回答的转贴
在我的情况下,网络面板显示响应具有“Set-Cookie”header,但在 axios 中,header 不会显示,并且 cookie 已设置。
对我来说,解决方案是设置Access-Control-Expose-Headers
header。
为了解释,从 axios 存储库中的一个问题的评论中,我被引导到这个人的笔记,这导致我设置Access-Control-Expose-Headers
header - 现在cookie在客户端中正确设置。
因此,在 Express.js 中,我必须将暴露的Headers 选项添加到我的exposedHeaders
中间件中:
const corsOptions = {
//To allow requests from client
origin: [
"http://localhost:3001",
"http://127.0.0.1",
"http://104.142.122.231",
],
credentials: true,
exposedHeaders: ["set-cookie"],
};
...
app.use("/", cors(corsOptions), router);
同样重要的是,在 axios 方面,我在以下 axios 请求中使用withCredentials
配置,我想包括 cookies。
前任/
const { data } = await api.get("/workouts", { withCredentials: true });
虽然您将客户端和服务器托管在与http://localhost
相同的域中,但您的端口不同,因此同源策略在这里失败。 您可以查看https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy 。
因此,您发出 CORS 请求,在您当前浏览器的开发人员工具中检查您的网络选项卡,在您的客户端向您的服务器发送POST
请求之前,您可能会看到一个预检请求OPTIONS
。
服务器必须指定标头以接受下一个请求的来源 - 来自http://localhost:8000
的 POST 请求,使用方法POST
,您可以参考https://developer.mozilla.org/en-US/docs/Glossary/ Preflight_request
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST // Your next request will use POST method
Access-Control-Max-Age: 86400
Access-Control-Allow-Credentials: true // cookies accepted
添加:
在Set-Cookie
中, Max-Age
必须是非零数字。 根据RFC doc将其四舍五入为 integer 。 对于 express.js,cookies `maxAge 属性以毫秒为单位
解决方案将maxAge
属性设置为second * 1000
res.cookie('jwt', token, {
maxAge: 10000,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.