Authentication 为跨源请求设置Cookie

如何跨来源共享cookies？更具体地说，如何将

设置Cookie

标头与标头

访问控制允许源站

结合使用

以下是对我的情况的解释：

我正在尝试为在

localhost:3000

上托管的web应用程序中运行在

localhost:4000

上的API设置cookie

看起来我在浏览器中收到了正确的响应标题，但不幸的是它们没有效果。以下是响应标题：

HTTP/1.1 200 OK Access-Control-Allow-Origin: http://localhost:3000 Vary: Origin, Accept-Encoding Set-Cookie: token=0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age=86400; Domain=localhost:4000; Path=/; Expires=Tue, 19 Sep 2017 21:11:36 GMT; HttpOnly Content-Type: application/json; charset=utf-8 Content-Length: 180 ETag: W/"b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ" Date: Mon, 18 Sep 2017 21:11:36 GMT Connection: keep-alive 浏览器中的请求：

request.post({ uri: '/signin', json: { userName: 'userOne', password: '123456'}}, (err, response, body) => { // doing stuff }) post（{uri:'/signin'，json:{userName:'userOne'，password:'123456'}}，（err，response，body）=>{ //做事 }) 更新二： 我现在正在疯狂地设置请求和响应头，确保它们同时出现在请求和响应中。下面是一个截图。请注意标题

Access Control Allow Credentials

，

Access Control Allow headers

，

Access Control Allow Methods

和

Access Control Allow Origin

。查看我发现的问题，我的印象是所有必需的标题现在都设置好了。然而，仍然没有运气

您需要做什么 要允许通过CORS请求成功接收和发送Cookie，请执行以下操作

后端（服务器）： 将HTTP头值设置为

true

。 另外，请确保HTTP头和已设置且未使用通配符

*

2021年每个Chrome和Firefox更新的推荐Cookie设置：

SameSite=None

和

Secure

。看

有关在express js中设置COR的详细信息

前端（客户端）：将标志设置为

true

，这可以通过不同的方式实现，具体取决于所使用的请求-响应库：

• xhrFields:{withCredentials:true}

• 凭证：“包括”

• ：

  withCredentials:true

或 避免将CORS与Cookie结合使用。您可以通过代理来实现这一点

如果你出于任何原因不逃避它。解决方案就在上面

---

事实证明，如果域包含端口，Chrome不会设置cookie。将其设置为

localhost

（不带端口）不是问题。非常感谢您的提示

皮姆的回答很有帮助。在我的情况下，我必须使用

Expires / Max-Age: "Session"

如果是日期时间，即使未过期，也不会将cookie发送到后端：

Expires / Max-Age: "Thu, 21 May 2020 09:00:34 GMT"

---

希望它对未来可能遇到相同问题的人有所帮助。

为了让客户端能够从跨来源请求中读取cookie，您需要：

来自服务器的所有响应都需要在其标头中包含以下内容：

访问控制允许凭据：true

客户端需要使用

withCredentials:true

选项发送所有请求

在Angular 7和Spring Boot的实现中，我通过以下几点实现了这一点：

---

服务器端：

@交叉原点（原点=”http://my-cross-origin-url.com，allowCredentials=“true”）
@控制器
@请求映射（路径=“/something”）
公共类SomethingController{
...
}

origins=”http://my-cross-origin-url.com“

零件将添加

访问控制允许原点：http://my-cross-origin-url.com

发送到每个服务器的响应头

allowCredentials=“true”

部分将向每个服务器的响应头添加

访问控制允许凭据：true

，这是客户端读取cookie所需的

---

客户端：

import{HttpInterceptor，HttpXsrfTokenExtractor，HttpRequest，HttpHandler，HttpEvent}来自“@angular/common/http”；
从“@angular/core”导入{Injectable}”；
从“rxjs”导入{Observable}；
@可注射（）
导出类CustomHttpInterceptor实现HttpInterceptor{
构造函数（专用令牌提取器：HttpXsrfTokenExtractor）{
}
截取（请求：HttpRequest
2020年发布的Chrome浏览器注意事项

Chrome的未来版本将只提供跨站点的cookie
如果使用
SameSite=None
和
Secure
设置请求

因此，如果后端服务器未设置SameSite=None，Chrome将默认使用SameSite=Lax，并且不会将此cookie与{withCredentials:true}请求一起使用

更多信息

Firefox和Edge开发者也希望在将来发布此功能

此处可找到规范：
对于express，请将express库升级到最新稳定版本
4.17.1

在CorsOption中：将
origin
设置为本地主机url或前端生产url，并将
凭证设置为
true
e、 g

我使用动态设置原点

然后，在res.cookie中：

对于localhost：您根本不需要设置sameSite和secure选项，您可以根据您的用例将http cookie的
httpOnly
设置为
true
，以防止XSS攻击和其他有用的攻击

对于生产环境，您需要为跨源请求将
sameSite
设置为
none
，并将
secure
设置为
true
。请记住
sameSite
目前仅适用于express最新版本，而最新chrome版本仅在
https
上设置cookie，因此需要安全选项

这是我如何使我的动态

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })

@PimHeijden看看这个：也许你需要使用withCredentials？好的，你正在使用request，我认为这不是最好的选择，看看这篇文章和答案，axios我认为对你有用。谢谢！我没有注意到，
请求
模块不适合在浏览器中使用。axios似乎可以到目前为止做得很好
  const corsOptions = {
    origin: config.get("origin"),
    credentials: true,
  };

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })