我创建了一个测试React应用程序,部署在vercel,服务器在render.com。为了解决跨站点cookie问题,我在两个站点上设置了相同的域(app.mydomain.online应用程序为www.example.com,APIapi.mydomain.online)。现在,当我查看标题中的cookie时,没有显示任何错误。但是,cookie仍然没有被存储。
通过npm init创建服务器。通过npm create-react-app创建React。
这是我的示例代码。
伺服器
const express = require("express");
const cors = require("cors");
const session = require('express-session');
const app = express();
require('dotenv').config();
const PORT = process.env.PORT;
app.use(express.json());
app.use(cors({
origin: 'https://app.myDomain.online',
methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
credentials: true
}));
const oneDay = 1000 * 60 * 60 * 24;
app.set('trust proxy', 1) // trust first proxy
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true, sameSite: 'none' }
}));
app.get('/createSession', (req, res) => {
req.session.user = 'user';
res.send('new session is created');
});
app.get('/', (req, res) => {
res.send('get sess')
});
app.get('/getSession', (req, res) => {
if(req.session.user){
res.send('active');
}else{
res.send('not active');
}
});
app.listen(PORT, () => {
console.log(`The server is running on port ${PORT}`);
});
React
import React from 'react'
import { useEffect } from 'react';
import Axios from 'axios';
function Test() {
useEffect(() => {
Axios.get(' https://api.myDomain.online/createSession',
{ withCredentials: true }
);
}, []);
return (
<div>Test</div>
)
}
export default Test;
2条答案
按热度按时间pzfprimi1#
从快速会话的文档中...
cookie.过期
将
Date
对象指定为Expires Set-Cookie
属性的值。默认情况下,不设置过期,大多数客户端将认为这是“非持久性Cookie”,并将在退出Web浏览器应用程序等情况下删除它。文档继续使用
maxAge
属性来控制这一点。选择一个对您的应用程序有意义的时间范围。例如,1周...ep6jt1vc2#
事实上,几天前我找到了一个解决方案,原来,cookie被阻止是因为它的域太类似于服务器的.我能够通过从cookie的域中删除作为cookie的API来修复它:{ domain:'.domain.com' }。这是我的新代码。