Как получить значение в заголовке ответа Angular2

Я хочу получить токен сеанса в заголовке ответа (Set-Cookie). Как я могу получить доступ к значениям в заголовке ответа?

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);

                });

это мой ответ заголовка

введите описание изображения здесь

Ответы

Ответ 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 с доступом к заголовкам ответов. См. Этот вопрос:

Ответ 2

Один из способов решить эту проблему - указать из вашего бэкэнда одну из пар {ключ: значение} ваших заголовков, которые вы хотите открыть.

Используя java-сервер, вы можете добавить следующие строки:

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

И теперь вы можете получить доступ к этому элементу cookie с помощью angular таким образом

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

Больше объяснений здесь

Ответ 4

Вы должны открыть заголовки на стороне сервера. Некоторым заголовкам разрешен доступ от клиента, например, к типу контента, но не ко всем. Для получения дополнительной информации см. Пункт: "Access-Control-Expose-Headers (необязательно)" в http://www.html5rocks.com/en/tutorials/cors/

Ответ 5

Ответ прост, просто используйте Местоположение из URL внутри карты.

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

Ответ 6

Это остановило меня на час. Хотя отладчик Chrome показывает заголовок "Местоположение", я не смог прочитать его в angular @4.3.3 с помощью Microsoft.AspNetCore.Mvc 2.0.0

Оказывается, это проблема 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 может это увидеть, но angular не может - он, очевидно, все еще является частью фактического ответа веб-api.