Question

目标

目标是使用HTTP Basic调用远程登录服务，并接收JSESSIONID以供进一步使用。

经过测试的后端

到目前为止，我已完成了包含200响应的服务电话。我的测试与restassured工作顺利，并表明登录服务正确提供JSESSIONID。 Spring后端服务使用@CrossOrigin进行注释。

// assure we are not logged in
RestAssured.baseURI = "https://" + ip;
RestAssured.basePath = "/user";
Response responseA = post("/create"); // /user/create is a secured service
assertEquals(401, responseA.statusCode());

// log in and save the token
RestAssured.baseURI = "https://" + username + ":pass@" + ip; // http basic auth is used
RestAssured.basePath = "/user";
Response responseB = post("/login");
assertEquals(200, responseB.statusCode());

String jsessionId = responseB.getCookie("JSESSIONID");
// C50C28EA1F3ABBB76F0E4189A772A4E9

RestAssured.baseURI = "https://" + ip;
RestAssured.basePath = "/user";

// call a service without token or credentials --> 401
Response responseC = get("/id"); // /user/id is a secured service
assertEquals(401, responseC.statusCode());

// call a service with the token
RestAssured.sessionId = jsessionId;
Response responseD = get("/id");
assertEquals(200, responseD.statusCode());

测试是绿色的。

前端问题

在我们的Angular2前端应用程序中，我们有一个登录页面，其提交按钮通过onSubmit()方法运行以下代码。

_url = "theLoginServiceUrl"

createAuthorizationHeader(username: string, password: string, headers:Headers) {
    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
    // tried all of these, but they didn't fix the problem
    // headers.append('Access-Control-Allow-Origin', '*');
    // headers.append('Access-Control-Allow-Headers', '*');
    // headers.append('Access-Control-Allow-Methods', '*');
}

login (username: string, password: string) {
    let headers = new Headers();
    this.createAuthorizationHeader(username, password, headers);
    return this._http.post(this._url, "", {
        headers: headers
    });
}

onSubmit() {
    this.login(this.currentUser.username, this.currentUser.password)
        .subscribe((res) => {
                var headers = res.headers;
                console.log(headers); 
                // Headers {_headersMap: Map}
                // <entries>[3]
                // {"Pragma" => Array[1]}
                // {"Cache-Control" => Array[1]}
                // {"Expires" => Array[1]}

                var setCookieHeader = headers.get('Set-Cookie');
                console.log(setCookieHeader)
                // null
            }
        );
}

正如您从评论中看到的那样，我无法访问Set-Cookie标题。但是在浏览器中，我看到包含Set-Cookie标题的成功通话：

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
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
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
X-Frame-Options: DENY
Set-Cookie: JSESSIONID=58A072F2BB40A711CB42233CA4EB7BF6; Path=/; Secure; HttpOnly
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Length: 0
Date: Fri, 06 May 2016 10:43:21 GMT

请注意，这一切都贯穿HTTPS。

前端细节：

"typescript": "^1.7.5"
"angular2": "2.0.0-beta.7"

问题：

为什么我无法访问Angular2代码中的Set-Cookie？我需要改变什么？

Answer 1

为Cookie设置Secure后，您无法使用JavaScript读取它。 Cookie的目的只是对发出的请求进行身份验证，并且每个请求都会由浏览器发送，但出于安全考虑，它不适用于JavaScript代码。

要检查用户是否已登录的JS代码，请使用不同的度量，例如调用以当前登录状态响应的服务器。

另见How to read a secure cookie using JavaScript

Angular2在REST服务的响应中缺少Set-Cookie

目标

经过测试的后端

前端问题

问题：

1 个答案: