经过一天多的尝试你们所有的建议和更多的尝试,我放弃了。
Chrome在本地主机上根本不接受我的跨域cookie。
没有错误,只是默默地被忽略了。
我想要使用http only cookie来更安全地存储令牌。
所以对于本地主机来说,代理似乎是解决这个问题的最佳方法。我还没有真正尝试过。
我最终做的事情,也许能帮助到别人。
后端(node/express/typescript)
像平常一样设置cookie。
res.status(200).cookie("token", token, cookieOptions)
为本地主机创建一个解决方案
// if origin localhost
response.setHeader("X-Set-Cookie", response.getHeader("set-cookie") ?? "");
允许在CORS中使用x-set-cookie头
app.use(cors({
exposedHeaders: [
"X-Set-Cookie",
]
}));
前端(Axios)
在 Axios 响应中,
删除 domain= 使其默认。
拆分多个 cookie 并将它们存储在本地。
const xcookies = response.headers?.["x-set-cookie"];
if(xcookies !== undefined){
xcookies
.replace(/\s+Domain=[^=\s;]+;/g, "")
.split(/,\s+(?=[^=\s]+=[^=\s]+)/)
.forEach((cookie:string) => {
document.cookie = cookie.trim();
});
}
不是很理想,但我可以继续我的生活。
总的来说,我认为这只是变得过于复杂了 :-(
更新我的用例,也许我们可以解决它?
这是一个具有自定义域名的Heroku服务器。
根据这篇文章应该没问题
https://devcenter.heroku.com/articles/cookies-and-herokuapp-com
我进行了孤立的测试,但仍然无法使用。
我相当确定在FireFox中曾经看到过它工作,但目前除了我的丑陋的解决方法外,似乎什么都不起作用。
服务器端
app.set("trust proxy", 1);
app.get("/cors-cookie", (request: Request, response: Response) => {
console.log("origin", request.headers?.["origin"]);
const headers = response.getHeaders();
Object.keys(headers).forEach(x => {
response.removeHeader(x);
console.log("remove header ", x, headers[x]);
});
console.log("headers", response.getHeaders());
const expiryOffset = 1*24*60*60*1000;
const cookieOptions:CookieOptions = {
path: "/",
httpOnly: true,
sameSite: "none",
secure: true,
domain: "api.xxxx.nl",
expires: new Date(Date.now() + expiryOffset)
}
return response
.status(200)
.header("Access-Control-Allow-Credentials", "true")
.header("Access-Control-Allow-Origin", "http://localhost:3000")
.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT")
.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
.cookie("test-1", "_1_", cookieOptions)
.cookie("test-2", "_2_", {...cookieOptions, ...{ httpOnly: false }})
.cookie("test-3", "_3_", {...cookieOptions, ...{ domain: undefined }})
.cookie("test-4", "_4_", {...cookieOptions, ...{ domain: undefined, httpOnly: false }})
.cookie("test-5", "_5_", {...cookieOptions, ...{ domain: undefined, sameSite: "lax" }})
.cookie("test-6", "_6_", {...cookieOptions, ...{ domain: undefined, httpOnly: false, sameSite: "lax" }})
.cookie("test-7", "_7_", {...cookieOptions, ...{ domain: "localhost"}})
.cookie("test-8", "_8_", {...cookieOptions, ...{ domain: ".localhost"}})
.cookie("test-9", "_9_", {...cookieOptions, ...{ domain: "http://localhost:3000"}})
.json({
message: "cookie"
});
});
客户端
const response = await axios("https://api.xxxx.nl/cors-cookie", {
method: "get",
withCredentials: true,
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
}
});
这将产生以下响应
![enter image description here](https://istack.dev59.com/AQyRA.webp)
我在“Network > request > cookies”选项卡中看到了cookies。
但是在“Application > Storage > Cookies”或者“document.cookie”下没有cookies。
request
模块不适用于浏览器。Axios目前似乎做得很好。我现在收到了头部信息:Access-Control-Allow-Credentials:true
和Access-Control-Allow-Origin:http://localhost:3000
(用于启用CORS)。这看起来没问题,但是Set-Cookie
头部却没有任何作用... - Pim van der Heijden