Angular 4.3 HttpClient不发送授权标头

问题描述

我尝试使用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);
    }
  );
}

这里是网络调试标头源.

And here the network debug header source.

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(Angular开发服务器的标准端口)，而请求是向端口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/zh-CN/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不发送授权标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！