无法在CORS请求中发送凭据 [英] Unable to send credentials in CORS request

问题描述

我有一个Vue前端与服务器不在同一个域中的应用程序.具体来说，Vue位于localhost:8080上，而服务器位于localhost:4000.

I have an application where the Vue front-end is on a different domain than the server. Specifically, Vue is located on localhost:8080 and the server is located on localhost:4000.

在成功登录期间，服务器将使用具有会话密钥的HttpOnly cookie进行响应.这是回应:

During successful logins, the server responds with an HttpOnly cookie that has a session key. Here's the response:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTY.g3QAAAABbQAAABBndWFyZGlhbl9kZWZhdWx0bQAAAUNleUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaGRXUWlPaUpWYzJWeU9qSWlMQ0psZUhBaU9qRTBPVEl5TURrek5EY3NJbWxoZENJNk1UUTRPVFl4TnpNME55d2lhWE56SWpvaVFYTndhWEpsSWl3aWFuUnBJam9pWWpreU5tVmpZek10TVRrM1lTMDBPREkyTFRrek5tSXRaRGxsTURneE5UUTNZVEpsSWl3aWNHVnRJanA3ZlN3aWMzVmlJam9pVlhObGNqb3lJaXdpZEhsd0lqb2lZV05qWlhOekluMC43THdySDUxb1hVVFR3OEhYMzBPWDJTeTd0Si05RTFFZEpQV3ZDLS1WU3YycllpZ29aTUY4NkhUMzB6Q29SWXFBajlxYXFQc0dqTzNNNFJyOHYyY1ZGZw.2k1A4HuW6VV8ACZhgHY6Szuf5gXKAe_QwMCN3doi9D4; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: 
access-control-allow-credentials: true
vary: Origin

但是，即使我加入了credentials: true选项，

However, subsequent requests made with Vue Resource don't send this cookie back to the server, even though I'm including the credentials: true option:

this.$http.get("http://localhost:4000/api/account/", {credentials: true}).then(response => {
  //do stuff
}, response => {
  console.log(response.body.error)
})

我知道不包含凭据，因为我可以在Chrome中看到请求标头:

I know the credentials aren't included because I can see the request header in Chrome:

GET /api/account/ HTTP/1.1
Host: localhost:4000
Connection: keep-alive
Accept: application/json
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,tr;q=0.6

这样，我从服务器收到401未经授权的响应.

As such, I get a 401 Unauthorized response from the server.

我是否需要做一些特殊的事情才能在请求期间将此Cookie发送回服务器?

Do I need to do something special to have this cookie sent back to the server during requests?

更新1:还使用withCredentials: true在axios上进行了尝试.结果相同.

Update 1: Also tried with axios, using withCredentials: true. Same result.

更新2:经过进一步检查，这似乎是由于浏览器出于某种原因未保存cookie，尽管它随响应一起到达.也许这是一个单页应用程序这一事实.我想这会带来一个问题:如何在SPA中使用会话cookie?

Update 2: Upon further examination, this seems to be because the browser does not save the cookie for some reason, despite the fact that it arrives with the response. Maybe the fact that it's a single-page application has to do with this. I guess this brings up the question though: how to use session cookies with SPAs?

推荐答案

弄清楚了.两个问题.首先，Cookie到达了具有域localhost的浏览器，但实际上是向一个我刚刚映射到本地主机的虚拟域发出了请求.由于域名不匹配，因此浏览器未发送Cookie.

Figured it out. Two issues. First, the cookie was arriving at the browser with domain localhost but I was actually making the requests to a dummy domain that I had simply mapped to localhost. Because the domains didn't match, the browser didn't send the cookie.

第二，这是在Axios中使用withCredentials选项的正确方法:

Second, here is the correct way to use the withCredentials option in Axios:

axios.create({withCredentials: true}).get(/* ... */)

由于某些原因，无法在请求中设置选项.

Setting the option inside the request itself didn't work for some reason.

这篇关于无法在CORS请求中发送凭据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！