为什么我的身份验证 cookie 无法在 Safari 上保存？ React 前端/Express 后端

Question

作为参考，我使用两个不同的域作为前端/后端。注意：它在 safari 上使用本地主机和本地设置时有效。

当我发送请求时，状态为 200，但 cookie 并未保存。它在 chrome 上运行得很好。该页面的内容拦截器也被禁用。代码如下。

React 中的前端 (Vercel)

fetch(`${address}/login`, {
            method: 'POST',
            body: JSON.stringify({
                username: username.current.value,
                password: password.current.value
            }),
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            withCredentials: true
        })

Express 后端 (Render.com)

// index.js
app.use(cors(allowedOrigins));
const mainRoutes = require('./routes/main');
app.use('/', mainRoutes); // main routes

// main.js

router.post('/login', accountController.login); // login

// accountController.js

res.header('Access-Control-Allow-Origin', "https://st-events.vercel.app");
        res.header('Access-Control-Allow-Credentials', true);

        // sends cookie to the user
        res.cookie('authentication', cookieValue, { 
            maxAge: 604800000,
            httpOnly: true, 
            secure: true,
            domain: 'event-manager-backend-d7uu.onrender.com',
            path: '/',
            sameSite: 'none'
        }).send();

我尝试编辑 cookie 和 cors 设置，但在 safari 上似乎没有任何解决办法。如果你想查看完整的代码，github如下： https://github.com/charleywolf/event-manager-frontend https://github.com/charleywolf/event-manager-backend

编辑 现在，在 Safari 中禁用所有网站上的跨站点跟踪时，会保存登录/cookie。显然，这不太理想，因为许多用户不会仅仅为了访问网站而这样做。我现在正在尝试找到一种方法，让 Safari 不将我的 cookie 标记为跨站点跟踪。

Answer 1

由于带有 http 请求的 safari 配置，cookie 无法保存在本地主机，您可以尝试将 SameSite 保留为“未指定”并将安全保留为“无”