为跨源请求设置 cookie [英] Set cookies for cross origin requests
问题描述
如何跨域共享cookies?更具体地说,如何将 Set-Cookie
标头与标头 Access-Control-Allow-Origin
结合使用?
以下是我的情况的说明:
我正在尝试为 localhost:4000
上运行的 API 设置 cookie,该 API 位于 localhost:3000
上托管的 Web 应用程序中.
我似乎在浏览器中收到了正确的响应标头,但不幸的是它们没有效果.这些是响应头:
<前>HTTP/1.1 200 正常访问控制允许来源:http://localhost:3000变化:来源,接受编码设置-Cookie:令牌=0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7;最大年龄=86400;域=本地主机:4000;路径=/;到期日 = 2017 年 9 月 19 日星期二 21:11:36 GMT;仅Http内容类型:应用程序/json;字符集=utf-8内容长度:180ETag:带b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"日期:2017 年 9 月 18 日星期一 21:11:36 GMT连接:保持连接此外,当我使用 Chrome 开发人员工具的网络选项卡检查流量时,我可以在 Response Cookies
下看到 cookie.但是,我看不到在 Storage/Cookies
下的应用程序选项卡中设置了 cookie.我没有看到任何 CORS 错误,所以我认为我遗漏了其他东西.
有什么建议吗?
更新一:
我在 React-Redux 应用程序中使用
你需要做什么
允许接收 &成功通过 CORS 请求发送 cookie,请执行以下操作.
后端(服务器):设置 HTTP 标头 Access-Control-Allow-Credentials
值为 true
.另外,请确保 HTTP 标头 Access-Control-Allow-Origin
和 Access-Control-Allow-Headers
已设置且不使用通配符*
.
有关在 express js 中设置 CORS 的更多信息阅读此处的文档
Cookie 设置:2021 年每个 Chrome 和 Firefox 更新的推荐 Cookie 设置:SameSite=None
和 Secure
.请参阅 MDN.
在执行 SameSite=None
时,甚至需要 Secure
.请参阅MDN.>
前端(客户端): 设置 XMLHttpRequest.withCredentials
标记为 true
,这可以通过不同的方式实现,具体取决于所使用的请求-响应库:
jQuery 1.5.1
xhrFields: {withCredentials: true}
ES6 fetch()
credentials: 'include'代码>
axios:
withCredentials:true
或
避免将 CORS 与 cookie 结合使用.您可以使用代理来实现这一点.
如果您出于任何原因不要避免它.解决方案如上.
事实证明,如果域包含端口,Chrome 不会设置 cookie.将它设置为 localhost
(没有端口)不是问题.非常感谢 Erwin 的提示!
How to share cookies cross origin? More specifically, how to use the Set-Cookie
header in combination with the header Access-Control-Allow-Origin
?
Here's an explanation of my situation:
I am attempting to set a cookie for an API that is running on localhost:4000
in a web app that is hosted on localhost:3000
.
It seems I'm receiving the right response headers in the browser, but unfortunately they have no effect. These are the response headers:
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
Furthermore, I can see the cookie under Response Cookies
when I inspect the traffic using the Network tab of Chrome's developer tools. Yet, I can't see a cookie being set in in the Application tab under Storage/Cookies
. I don't see any CORS errors, so I assume I'm missing something else.
Any suggestions?
Update I:
I'm using the request module in a React-Redux app to issue a request to a /signin
endpoint on the server. For the server I use express.
Express server:
res.cookie('token', 'xxx-xxx-xxx', { maxAge: 86400000, httpOnly: true, domain: 'localhost:3000' })
Request in browser:
request.post({ uri: '/signin', json: { userName: 'userOne', password: '123456'}}, (err, response, body) => { // doing stuff })
Update II:
I am setting request and response headers now like crazy now, making sure that they are present in both the request and the response. Below is a screenshot. Notice the headers Access-Control-Allow-Credentials
, Access-Control-Allow-Headers
, Access-Control-Allow-Methods
and Access-Control-Allow-Origin
. Looking at the issue I found at Axios's github, I'm under the impression that all required headers are now set. Yet, there's still no luck...
What you need to do
To allow receiving & sending cookies by a CORS request successfully, do the following.
Back-end (server):
Set the HTTP header Access-Control-Allow-Credentials
value to true
.
Also, make sure the HTTP headers Access-Control-Allow-Origin
and Access-Control-Allow-Headers
are set and not with a wildcard *
.
For more info on setting CORS in express js read the docs here
Cookie settings:
Recommended Cookie settings per Chrome and Firefox update in 2021: SameSite=None
and Secure
. See MDN.
When doing SameSite=None
, Secure
is even required. See MDN.
Front-end (client): Set the XMLHttpRequest.withCredentials
flag to true
, this can be achieved in different ways depending on the request-response library used:
jQuery 1.5.1
xhrFields: {withCredentials: true}
ES6 fetch()
credentials: 'include'
axios:
withCredentials: true
Or
Avoid having to use CORS in combination with cookies. You can achieve this with a proxy.
If you for whatever reason don't avoid it. The solution is above.
It turned out that Chrome won't set the cookie if the domain contains a port. Setting it for localhost
(without port) is not a problem. Many thanks to Erwin for this tip!
这篇关于为跨源请求设置 cookie的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!