浏览器阻止 CORS cookie

Question

我在自定义域上使用通过 Firebase 托管托管的 Firebase Functions - api.example.com。

当用户登录我的网站时，会向服务器发送一个请求

await fetch(`https://api.example.com/test`, {
        method: 'POST',
    credentials: 'include',
    })
        .then(async function (response) {
            if (response.status == 200) {
                let text = await response.text();
                console.log(text);
            }
            else {
                console.log("Failed");
                return null;
            }
        });

在 Cloud Functions 中，测试端点被触发，如下所示：

exports.test = functions
    .https.onRequest((request, response) => {
        const expiresIn = 60 * 60 * 24 * 5 * 1000;
        const origin = request.headers.origin;

        const options = { maxAge: expiresIn, httpOnly: true, secure: true, sameSite: 'None'};
        response.cookie('__session', "123456", options);
        response.set('Access-Control-Allow-Origin', origin);
        response.set('Access-Control-Allow-Credentials', true);
        response.set('Access-Control-Allow-Headers', 'credentials');
        response.end(JSON.stringify({ status: 'success' }));
})

问题是： mozilla、chrome、safari 的浏览器开发工具显示服务器的响应，其中 header 包含 set-cookie: __session=123456; Max-Age=432000; Path=/; Expires=Mon, 30 Aug 2021 11:25:25 GMT; HttpOnly; Secure; SameSite=None 但 cookie 未存储在 Mozilla Firefox 和 Safari 中。在 Chrome 中，它被存储但在页面刷新后被删除，尽管它应该保留。

我在这里做错了什么？有什么建议吗？

Answer 1

我找到了解决方案。我没有为 cookie 选项指定域。

它应该如下所示：

exports.test = functions
    .https.onRequest((request, response) => {
        const expiresIn = 60 * 60 * 24 * 5 * 1000;
        const origin = request.headers.origin;

        const options = { maxAge: expiresIn, httpOnly: true, secure: true, sameSite: 'None', domain: 'example.com'};
        response.cookie('__session', "123456", options);
        response.set('Access-Control-Allow-Origin', origin);
        response.set('Access-Control-Allow-Credentials', true);
        response.set('Access-Control-Allow-Headers', 'credentials');
        response.end(JSON.stringify({ status: 'success' }));
})

浏览器阻止 CORS cookie

Browsers block CORS cookie

cookies

google-chrome

cross-domain

firebase

google-cloud-functions