cookies - Spring Security 身份验证跨域 cookie 与授权 header

Question

我正在使用 Spring Security 对 REST API 进行身份验证。身份验证工作正常，Spring Security 使用 Set-Cookie 返回一个 token 。 rememberMe 功能已开启，并且在 cookie 中返回相同的内容。

当我发出后续请求时，身份验证会失败，除非我在 Authorization header 中发送用户名/密码，而当我在 postman 中测试时，它会起作用。我看到它在请求的 cookie 中添加了 JSESSIONID 。

由于 cookie 是 Http-Only cookie，我认为我无法在 JavaScript 函数中读取它们。

那么如何验证用户身份呢？我假设如果服务器使用 set-cookie 返回一个 cookie，浏览器应该自动为每个请求附加它。

登录客户端请求:

context.$http.get(url, {
    headers:
    {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
      'Authorization': auth
    }
  }

请求 header :

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4
Access-Control-Request-Headers:access-control-allow-methods,access-control-allow-origin,authorization
Access-Control-Request-Method:GET
Connection:keep-alive
DNT:1
Host:localhost:9000
Origin:http://localhost:8080
Referer:http://localhost:8080/login?redirect=%2F
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

响应 header :

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:8080
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:13
Content-Type:application/json;charset=UTF-8
Date:Fri, 18 Aug 2017 05:40:55 GMT
Expires:0
Pragma:no-cache
Set-Cookie:remember-me=dTVTMi94dnVkQzJtYXRFYmJkR1VKZz09OjA1T1F4RXVOV0RiTEx4VFdUSVByeGc9PQ; Max-Age=86400; Expires=Sat, 19-Aug-2017 05:40:55 GMT; Path=/; Secure; HttpOnly
Set-Cookie:JSESSIONID=4A856E0216191E8601100B600E4A227B; Path=/; HttpOnly
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

后续请求获取数据:

this.$http.get(url).then(function (res) {
          this.items = res.data
        })

客户请求:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4
Connection:keep-alive
DNT:1
Host:localhost:9000
Origin:http://localhost:8080
Referer:http://localhost:8080/Languages
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

服务器响应:

HTTP/1.1 401
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Access-Control-Allow-Origin: http://localhost:8080
Vary: Origin
Access-Control-Allow-Credentials: true
WWW-Authenticate: Basic realm="Realm"
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 18 Aug 2017 05:43:26 GMT

{timestamp: 1503038407254, status: 401, error: "Unauthorized",…}
error :
"Unauthorized"
message:"Full authentication is required to access this resource"
path:"/languages"
status:401
timestamp:1503038407254

添加withCredentials:true:

GET /languages HTTP/1.1
Host: 192.168.16.142:12345
Connection: keep-alive
Access-Control-Allow-Origin: *
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Access-Control-Allow-Methods: GET,PUT,POST,DELETE
DNT: 1
Referer: http://localhost:8080/languages
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4

回应:

Access-Control-Allow-Origin:*
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Mon, 21 Aug 2017 06:26:24 GMT
Expires:0
Pragma:no-cache
Transfer-Encoding:chunked
Vary:Origin
WWW-Authenticate:Basic realm="Realm"
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

仅供引用:我在前端使用 vuejs。

Answer 1

仔细查看您的响应/请求流后，您会从端口 8080 向端口 9000 发起请求，这会触发同源策略 (CORS) 规则。默认情况下，CORS 请求不会发送凭据/cookie，如下面的链接中所述。要启用凭据/cookie 传播，您需要在 AJAX 调用中设置“withCredentials”标志。

而且，看起来你正在使用vuejs。要启用凭据，您需要使用以下设置。

Vue.http.options.credentials = true;

MDN - Request with credentials