Question

我想在响应头（Set-Cookie）中获取会话令牌。如何才能访问Response头中的值？

var headers = new Headers();
            headers.append('Content-Type', 'application/json');
            console.log('url',this.loginUrl)
            this.http.post(this.loginUrl,
                JSON.stringify({ "username": value.username, "password": value.password }),
                { headers: headers })
                .map((res: Response) => 
                    res.json())
                .subscribe((res) => {
                    console.log("res", res);
                    this.loading.hide();
                    if (res.message_code == "SUCCESS") {
                        this.nav.setRoot(HomePage, {
                            username: value.username,
                        });
                    } else {
                        let alert =  Alert.create({
                            title: "Sign In Error !",
                            subTitle: 'Please Check Username or Password.',
                            buttons: ['Ok']
                        });
                        this.nav.present(alert);
                    }
                }, err => {
                    this.loading.hide();
                    console.log('error', err);

                });

这是我的标题回复

Answer 1

问题是您将响应映射到其json内容。可以从响应本身到达标头。因此，您需要删除map运算符：

this.http.post(this.loginUrl,
       JSON.stringify({ "username": value.username, "password": value.password }),
       { headers: headers })
        /*.map((res: Response) =>  // <--------------
                res.json())*/
       .subscribe((res) => {
         var payload = res.json();
         var headers = res.headers;

         var setCookieHeader = headers.get('Set-Cookie')
         (...)
       });

在访问响应标头时要小心CORS。看到这个问题：

{{3}}

Answer 2

解决该问题的一种方法是从后端指定要公开的标题中的哪一对{key：value}。

使用java后端，您可以添加以下行：

public void methodJava(HttpServletResponse response){
...
response.addHeader("access-control-expose-headers", "Set-Cookie");
}

现在你可以用你的角度来访问这个cookie元素

service(){
...
return this.http
    .get(<your url here for your backend>)
    .map(res => console.log("cookie: " + res.headers.get("Set-Cookie") )
}

更多解释here

Answer 3

.map((res: Response) => { localStorage.setItem('setCookie', res.headers._headers.get("Set-Cookie")[0]); res.json() })

或者您可以参考https://angular.io/docs/ts/latest/api/http/index/Headers-class.html

Answer 4

如上所述here

您需要在生产者端设置权限以访问标题 -

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, X-Custom-header");
header("Access-Control-Expose-Headers: X-Custom-header");

你可以做到这一点 -

this._http.get(url, options).toPromise()
            .then(res => {
                var data = res.headers.get('X-Custom-header');
                console.log(data);
                return res;
            })

检查出来。

Answer 5

您必须在服务器端公开标头。允许某些标头从客户端访问，例如内容类型，但不是全部。有关详细信息，请查看段落：＆＃39; Access-Control-Expose-Headers（可选）＆＃39;在http://www.html5rocks.com/en/tutorials/cors/

Answer 6

这让我难以忍受了一个小时。虽然Chrome调试器显示“位置”标题但我无法使用Microsoft.AspNetCore.Mvc 2.0.0在angular@4.3.3中读取它。

事实证明这是一个CORS问题。修复程序是Startup.cs中的一个内容：

app.UseCors(builder =>
    builder.WithOrigins("https://mywebsite")
        .WithExposedHeaders("Location")  // <--------- ADD THIS LINE
        .AllowAnyHeader()
        .AllowAnyMethod());

现在我可以用angular读取标题：

this.authHttp.post('https://someapi/something', {name: 'testing'})
    .map((response: Response) => {
        // The following line now works:
        const url = response.headers.get('Location');
    });

我不确定Chrome是如何看到它的，但角度不能 - 它显然仍然是实际网络API响应的一部分。

Answer 7

答案很简单，只需使用地图功能

中网址的位置

.map((data: Response) => { response.url })

Answer 8

另一个使用Angular 4.2。+的解决方案；

服务

getProfile(data) {
   return this.httpClient
      .request(new HttpRequest("POST", this.url, {}));
}

组件

this.userService.getProfile().subscribe(
  (response: any) => {
    if (response.type === HttpEventType.Response) {
      // response.headers is here
    }
  },
  (error: HttpErrorResponse) => {
    this.showMessage("error", "An error occurred");
  }
);

如何在Response头Angular2中获取值

8 个答案: