重定向后 Cookie 消失

Question

我有：

1) 具有自己的域的客户端应用程序：http://client.com

2) 具有单独域的服务器端应用程序：http://server.com

现在，

场景是：

1) 在浏览器中打开http://client.com/home，会显示一个HTML页面。

2) http://client.com/home 重定向到 http://server.com/login

3) http://server.com/login 存储一个 cookie 'auth' 并向 http://client.com/welcome 发送重定向指令

回复：

访问控制允许来源：*

连接：保持活动

内容长度：104

内容类型：文本/html；字符集=utf-8

日期：格林威治标准时间 2019 年 1 月 16 日，星期三 10:47:11

位置：http://client.com/welcome

设置-Cookie: auth=1479da80-197c-11e9-ba74-59606594e2fb;路径=/

变化：接受

X-Powered-By: Express

4) 浏览器收到响应，其中包含 cookie 'auth'

5) 浏览器将自身重定向到http://client.com/welcome

6) 'auth' cookie 被发送到http://client.com/welcome

请求：

Cookie：auth=1479da80-197c-11e9-ba74-59606594e2fb

7) http://client.com/welcome 返回 HTML 但不返回 cookie 'auth'

8) http://client.com/welcome 向 http://server.com/data 发出 AJAX 请求（启用 CORS），但未发送 cookie 'auth'

9) http://server.com/data 无法识别用户，因为没有 cookie

客户端是一个由 Node.js 托管的 Angular 应用

编辑：

按照建议，我已添加到 server.com 的响应中：

访问控制允许凭据：true

但没有任何改变。

相关客户端代码：

const headerOptions = new HttpHeaders({
      'Content-Type': 'application/json', 'withCredentials': 'true', 'Access-Control-Allow-Origin': 'true', 'Access-Control-Allow-Credentials': 'true'
    });

this.httpClient.get<any>(this.baseUrl + "data", { headers: headerOptions }).subscribe((res) => {

Answer 1

在将 ajax 请求发送到 http://server.com 时，您应该使用 withCredentials 选项，并且您的 server.com 应该将 Access-Control-Allow-Credentials 设置为 true。

Example code in Node.JS server:

var cors = require('cors');
var corsOptions = {
    origin: '*',
    credentials: true };

app.use(cors(corsOptions));

更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

Example code in Angular.JS client
import {RequestOptions, Request, RequestMethod} from '@angular/http';

const options = new RequestOptions({
  method: RequestMethod.Post,
  url: 'https://google.com',
  withCredentials: true
});

更多信息在这里：https://angular.io/api/http/RequestOptions

也看看这个：https://github.com/angular/angular/issues/24283 - 看起来某个特定版本的 Angular 有这个标志的问题，所以除非你使用的是更新的版本，否则你可能会需要明确设置标头。

这样做的原因是，除非服务器明确告诉客户端“我将接受另一个域传递的 cookie（以前在我的域上设置）” - 接受 cookie 将是安全问题。 更多：https://en.wikipedia.org/wiki/Cross-site_request_forgery

Answer 2

来自 Access-Control-Allow-Origin 规范： 对于没有凭据的请求，可以指定字面值“”，作为通配符；*

尝试将特定域添加到Access-Control-Allow-Origin 字段。

我认为您应该在 angular angular 应用程序中使用代理。欲了解更多信息，请查看此链接：https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Answer 3

您对正在发生的事情的描述似乎不正确。

• http://server.com/login 存储一个 cookie 'auth' 并向http://client.com/welcome 发送重定向指令
• 'auth' cookie 被发送到http://client.com/welcome

这不是（或至少不应该是）正在发生的事情。当浏览器请求http://server.com/login 并在响应中返回Set-Cookie 标头时，cookie 被设置并限制在server.com 域中，即使响应是重定向。如果您看到发送到 client.com 的 'auth' cookie，那么这是 client.com 之前设置的 cookie。

不管怎样，看来你真正关心的是

• http://client.com/welcome 向 http://server.com/data 发出 AJAX 请求（已启用 CORS），但未发送 cookie 'auth'

发生这种情况的原因有很多。

• CORS。您提到它启用了 CORS，但为了其他人阅读本文，您必须在 server.com 上设置以下 CORS 标头
  • Access-Control-Allow-Origin: http://client.com
  • Access-Control-Allow-Credentials: true
• 请注意，当您发送凭据时，您无法避免使用通配符作为Access-Control-Allow-Origin。另请注意，来源必须完全匹配，包括方案（http 或 https）。在实践中，服务器通常会读取请求的Origin 标头，对照白名单检查，如果允许，将请求中的Origin 标头值复制到响应中的Access-Control-Allow-Origin 标头。
• 您必须在 XHR 请求中设置 xhr.withCredentials = true。 （详情请参阅MDN。）

然后，在您完成所有这些之后，您还有另一个障碍。因为您在client.com 上并尝试向server.com 发送cookie，所以server.com cookie 被视为“第三方”cookie。 AFAIK 所有主要浏览器都有一个设置来阻止第三方 cookie 以保护隐私，因为它们最常被跟踪器用于收集营销数据以进行广告。我相信他们中的大多数默认情况下会阻止第三方 cookie，但我不确定。可以肯定，很多人已将浏览器设置为阻止第三方 cookie。

因此，您必须告诉访问者将浏览器配置为允许来自 server.com 的第三方 cookie。

顺便说一句，在重定向到不同域时设置 cookie 是不安全的。虽然 AFAIK 规范允许这样做，但浏览器支持存在问题。例如，请参阅此Chrome bug。