Angular 4.3 HttpClient 不发送授权标头 [英] Angular 4.3 HttpClient doesn't send Authorization header

问题描述

我尝试使用 Angular 的 HttpClient 发送带有授权标头的请求，但标头设置不成功.

I attempted to send a request with an authorization header using Angular's HttpClient but the header was not set successfully.

这是我的代码.

import {HttpClient, HttpHeaders} from '@angular/common/http';


constructor(private http: HttpClient,
            private auth: AuthService) {
}

sendRequest() {
  this.http.get(this.url, {
    headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.auth.getAccessToken())
  }).subscribe(
    data => {
      console.log(data);
    },
    error => {
      console.log(error);
    }
  );
}

这里是网络调试头源.

OPTIONS /userinfo HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:4200/user
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

响应头如下.

HTTP/1.1 400 Bad Request
Access-Control-Allow-Origin: *
Content-Type: text/plain; charset=utf-8
X-Content-Type-Options: nosniff
Date: Sun, 27 Aug 2017 23:45:15 GMT
Content-Length: 18

有什么问题吗?

推荐答案

如果您查看问题中包含的标头，您会发现这是一个 OPTIONS 请求.这表明您正在尝试发出跨站点请求，并且浏览器的 CORS(跨域资源共享)协议已启动.

If you look at the headers that you included in your question, you will see that this was an OPTIONS request. That indicates that you were attempting to make a cross-site request, and that the browser's CORS (Cross-Origin Resource Sharing) protocol kicked in.

您显然使用与发出请求的页面来源不同的域(或端口号)的凭据发出了 GET 请求.实际上，我们从您的标头中看到源是端口 4200(角度开发服务器的标准端口)，并且请求是针对端口 8080(可能是 java 后端?).

You apparently made a GET request with credentials against a domain (or port number) that was different from the origin of the page making the request. And indeed, we see from your headers that the origin was port 4200 (the standard port for the angular dev server), and that the request was made to port 8080 (probably a java back-end?).

标准 CORS 协议用于让浏览器进行预检"检查，方法是发送 OPTIONS 请求以查看是否返回 Access-Control-Allow-Origin 标头，说明允许源访问目标.

Standard CORS protocol is for the browser to do a "preflight" check, by sending the OPTIONS request to see if an Access-Control-Allow-Origin header comes back stating that the origin is allowed to access the destination.

如果标头返回正常，则浏览器将发出 GET 请求.如果没有，您将收到 401 响应.

If the header comes back ok, then the browser will make the GET request. If not, you will get a 401 response.

所有这一切都由浏览器完成，不受您的控制.

All of this is done by the browser, and is out of your control.

规范(https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0) 表示当浏览器发送 OPTIONS 请求作为预检的一部分时，它不能包含您的授权标头 - 这将只能在 GET 上发送.

The spec (https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0) says that when the browser sends the OPTIONS request as part of the preflight, it must not include your authorization header - that will only be sent on the GET.

所以，不 - 这里没有任何问题 - 它按预期工作.

So, no - nothing is wrong here - it is working as expected.

现在，如果在此之后，您收到 401 并且从未发送过 GET，那么您必须修改服务器以发送正确的 Access-Control-Allow-Origin 标头以响应 OPTIONS 请求.

Now, if after this, you get a 401 and the GET is never sent, then you'll have to modify the server to send the proper Access-Control-Allow-Origin header in response to the OPTIONS request.

有关 CORS 的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

For more info CORS, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

这篇关于Angular 4.3 HttpClient 不发送授权标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！