会话 Cookie 和 CORS。 Cookie 设置不正确

Question

我的问题： 我有一个服务器和一个应用程序在 2 个不同的域上运行。

1. Heroku 上的 Node.js Express API
2. 使用 CloudFront 的 S3 存储桶中的 Vue.JS 应用程序

调用 POST /login 工作正常，我收到了一个 cookie。 调用 GET /projects 我遇到了 401。

如果您检查请求和响应，您将看到第二个项目调用发送了不正确的 cookie。似乎 cookie 设置不正确。

登录调用请求

Host: ***-***.herokuapp.com
Connection: keep-alive
Content-Length: 56
Accept: application/json, text/plain, */*
DNT: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Content-Type: application/json;charset=UTF-8
Origin: https://***.********.nl
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://***.********.nl/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7,de;q=0.6

登录调用响应

Server: Cowboy
Connection: keep-alive
X-Dns-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Access-Control-Allow-Origin: https://***.********.nl
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Type: application/json; charset=utf-8
Content-Length: 103
Etag: W/"67-AcqjF7Jne+FP4OtwKOHMGKpgbHY"
Set-Cookie: SessionId=s%3AyWaalYxA-qU2KY3gvGbg0x1K3Ro7jjwI.d%2B8CZS3m6YCKL0X1TQSlm2TW3ihUaV%2BnfGpj3SsylEE; Path=/; HttpOnly; Secure; SameSite=None
Date: Sat, 18 Jul 2020 18:26:41 GMT
Via: 1.1 vegur

项目调用请求

GET /api/v1/projects/ HTTP/1.1
Host: ***-***.herokuapp.com
Connection: keep-alive
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
DNT: 1
Origin: https://***.********.nl
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://***.********.nl/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7,de;q=0.6
Cookie: SessionId=s%3Am5eOkHADAMTBXXdbnB3WwaEjsM8M6uqZ.8Ew5jim5S0iXei4DvucMZ%2BQv8LbUYteBE%2Bt6pVvtzEM

项目调用响应

HTTP/1.1 401 Unauthorized
Server: Cowboy
Connection: keep-alive
X-Dns-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Access-Control-Allow-Origin: https://***.********.nl
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Type: application/json; charset=utf-8
Content-Length: 45
Etag: W/"2d-dzHmdZiZSbYibOdmu6CEgThdGrs"
Date: Sat, 18 Jul 2020 18:26:42 GMT
Via: 1.1 vegur

快速 CORS 配置

this.app.use(cors({
      origin: ["https://********.nl", "https://***.********.nl", /\.********\.nl$/], 
      credentials: true
    }))

Passport.js 配置

    cookie: {
      production: true,
      maxAge: null,
      sameSite: 'none',
      secure: true,
    }

CloudFront 配置

Answer 1

这有点推测，但它太长了，无法放入评论中，所以我尝试将其作为答案...

这里的关键问题是其他 cookie 是从哪里来的？我看到了两种可能性：

1. 在登录请求之后还有另一个请求将其设置为该新值。
2. 另一个cookie一直都在那里。这是在过去某个时间设置的旧 cookie，而新 cookie 只是被忽略了。

您在问题中没有提到的一件事是第二个请求是否总是发送相同的 cookie。这将使我们能够区分我上面概述的两种情况。

我注意到原始登录请求不包含 cookie 请求标头。这很有趣，因为如果流氓 cookie 是旧 cookie，那么它也应该包含在该请求中。

基于所有这些，我的理论是您没有在登录请求上将withCredentials 标志设置为true。这可以解释为什么没有cookie 请求标头，也可以解释为什么返回的set-cookie 响应标头会被忽略。

为了清楚起见，您需要在两个请求上都设置withCredentials。仅在第二个请求上设置它是不够的。鉴于第二个请求包含 cookie 标头，看来第二个请求确实已经设置了 withCredentials。

我也建议你看看chrome://settings/siteData。这将向您准确显示设置了哪些 cookie，并允许您删除特定的 cookie。尝试删除相关的cookie，然后在登录时查看它是否被设置。