为跨源请求设置Cookie [英] Set cookies for cross origin requests
问题描述
如何跨源共享Cookie?更具体地说,如何将Set-Cookie
标头与标头Access-Control-Allow-Origin
结合使用?
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:
我正在尝试为在localhost:3000
上托管的Web应用程序中在localhost:4000
上运行的API设置cookie.
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
此外,当我使用Chrome开发人员工具的网络"标签检查流量时,可以在Response Cookies
下看到Cookie.但是,我看不到Storage/Cookies
下应用程序"选项卡中设置的cookie.我没有看到任何CORS错误,因此我认为我还缺少其他东西.
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.
有什么建议吗?
我正在React-Redux应用程序中使用请求模块向服务器上的/signin
端点.对于服务器,我使用express.
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服务器:
Express server:
res.cookie('token', 'xxx-xxx-xxx', { maxAge: 86400000, httpOnly: true, domain: 'localhost:3000' })
浏览器中的请求:
request.post({ uri: '/signin', json: { userName: 'userOne', password: '123456'}}, (err, response, body) => {
// doing stuff
})
更新II:
我现在正在疯狂地设置请求和响应头,以确保它们同时出现在请求和响应中.以下是屏幕截图.注意标题Access-Control-Allow-Credentials
,Access-Control-Allow-Headers
,Access-Control-Allow-Methods
和Access-Control-Allow-Origin
.查看我在 Axios的github 中发现的问题,我处于印象是现在已经设置了所有必需的标头.但是,仍然没有运气...
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...
推荐答案
您需要做什么
为了允许接收&通过CORS请求成功发送cookie,请执行以下操作.
What you need to do
To allow receiving & sending cookies by a CORS request successfully, do the following.
后端(服务器):
设置HTTP标头 Access-Control-Allow-Credentials
将a>值设置为true
.
另外,请确保HTTP标头 *
.
Back-end (server):
Set the HTTP header Access-Control-Allow-Credentials
value to true
.
Also, make sure the HTTP header Access-Control-Allow-Origin
is set and not with a wildcard *
.
前端(客户端):设置 XMLHttpRequest.withCredentials
标记为true
,这可以通过不同的方式来实现,具体取决于所使用的请求-响应库:
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
避免将CORS与Cookie结合使用.您可以使用代理来实现.
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.
事实证明,如果域中包含端口,Chrome不会设置Cookie.将其设置为localhost
(无端口)不是问题.非常感谢 Erwin 的提示!
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屋!