http post - 如何发送授权标头？

Question

如何在 Angular2 RC6 中为 http 请求添加标头？我得到以下代码：

 login(login: String, password: String): Observable<boolean> {
    console.log(login);
    console.log(password);
    this.cookieService.removeAll();
    let headers = new Headers();
    headers.append("Authorization","Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2");
    this.http.post(AUTHENTICATION_ENDPOINT + "?grant_type=password&scope=trust&username=" + login + "&password=" + password, null, {headers: headers}).subscribe(response => {
      console.log(response);
    });
    //some return
}

问题是，该角度不添加授权标头。取而代之的是，在请求中，我可以看到以下附加标头：

 Access-Control-Request-Headers:authorization
Access-Control-Request-Method:POST

并在 Accept-Encoding 中添加了 sdch：

 Accept-Encoding:gzip, deflate, sdch

不幸的是，没有授权标头。我应该如何正确添加它？

我的代码发送的整个请求如下所示：

 OPTIONS /oauth/token?grant_type=password&scope=trust&username=asdf&password=asdf HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3002
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:3002/login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,pl;q=0.6

原文由 Maciej Treder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的。我发现了问题。

它不在 Angular 方面。老实说，完全没有问题。

我无法成功执行请求的原因是我的服务器应用程序没有正确处理 OPTIONS 请求。

为什么选择选项，而不是发布？我的服务器应用程序位于不同的主机上，然后是前端。由于 CORS，我的浏览器将 POST 转换为 OPTION： http ://restlet.com/blog/2015/12/15/understanding-and-using-cors/

在这个答案的帮助下： Standalone Spring OAuth2 JWT Authorization Server + CORS

我在我的服务器端应用程序上实现了适当的过滤器。

感谢@Supamiu - 指点我说我根本没有发送 POST 的人。

原文由 Maciej Treder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您像我一样，并以您的角度/离子打字稿为主角，看起来像..

   getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, {
      headers: new HttpHeaders(
        {
          'Access-Control-Allow-Origin': 'https://localhost:5100',
          'Access-Control-Allow-Methods': 'POST',
          'Content-Type': 'application/pdf',
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

当您设置选项但似乎无法弄清楚为什么它们不在任何地方时..

好吧..如果您像我一样并从 post 的副本/粘贴开始 get ，那么…

改成：

   getPdf(endpoint: string): Observable<Blob> {
    let url = this.url + '/' + endpoint;
    let token = this.msal.accessToken;
    console.log(token);
    return this.http.post<Blob>(url, null, { //  <-----  notice the null  *****
      headers: new HttpHeaders(
        {
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

原文由 Adam Cox 发布，翻译遵循 CC BY-SA 4.0 许可协议