Question

我在向html帖子中添加额外标题时遇到了问题。与curl一起工作非常像邮递员。我无法在发布请求时添加授权标头。

我的问题类似于https://stackoverflow.com/questions/39408413/angular2-http-post-how-to-send-authorization-header

我的代码：

 getToken(){

let headers = new Headers;
headers.append('Authorization', 'Basic ' + btoa(Spotify.clientId + ':' + Spotify.clientSecret));
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let options = new RequestOptions({ headers: headers });


let params = new URLSearchParams();
params.append('grant_type', 'client_credentials');

 console.log(

  this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()

)  
}

现在，当我试图获得这两个标题时，没有添加

OPTIONS /api/token HTTP/1.1
Host: accounts.spotify.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://172.21.7.171:4200
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
  like Gecko) Chrome/59.0.3071.86 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */ *
Referer: http://172.21.7.171:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: pl,en;q=0.8,en-US;q=0.6

但是，当我评论Authorization标头时，会添加Content-Type并且get error_client的错误为400

POST /api/token HTTP/1.1
Host: accounts.spotify.com
Connection: keep-alive
Content-Length: 29
Accept: application/json, text/plain, */ *
Origin: http://172.21.7.171:4200
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
 like Gecko) Chrome/59.0.3071.86 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://172.21.7.171:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: pl,en;q=0.8,en-US;q=0.6

但是当我评论Content-Type标题并附加授权时，我遇到了与第一次相同的问题 - 没有添加标题：/

我有角度4.2 - 从ng cli安装和升级

如何向POST添加额外标题？在邮差这个工作完美

=====已编辑==== 感谢您的回复，但这两种解决方案都不起作用

getToken(){

let options = new RequestOptions();
  options.headers = new Headers();
  options.headers.append('Authorization', Spotify.token);
  options.headers.append('Content-Type', 'application/x-www-form-urlencoded')

let params = new URLSearchParams();
params.append('grant_type', 'client_credentials');

 console.log(
  this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()
) 
}

现在，如果我发表评论＆＃39;授权＆＃39; Content-Type被添加到带有AUthorization的请求中我没有添加任何标题，也没有发送正文

=========编辑=========

根据这个主题Angular2 - set headers for every request，我创建了default-request-options.service.ts

import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, Headers } from '@angular/http';

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {

    private superHeaders: Headers;

    get headers() {
        // Set the default 'Content-Type' header
        this.superHeaders.set('Content-Type', 'application/json');

        const token = localStorage.getItem('authToken');
        if(token) {
            this.superHeaders.set('Authorization', `Bearer ${token}`);
        } else {
            this.superHeaders.delete('Authorization');
        }
        return this.superHeaders;
    }

    set headers(headers: Headers) {
        this.superHeaders = headers;
    }

    constructor() {
        super();

    }
}

export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };

app.module.ts中的

import { requestOptionsProvider, DefaultRequestOptions } from './default-request-options.service'
...
providers: [
    requestOptionsProvider
  ],

现在在我的服务中

import { DefaultRequestOptions } from '../default-request-options.service';
  getToken(){

    let params = new URLSearchParams();
    params.append('grant_type', 'client_credentials');

    let options = new DefaultRequestOptions();
      //options.headers = new Headers();
     // options.headers.append('Authorization', Spotify.basicCode);
      //options.headers.append('Content-Type', 'application/x-www-form-urlencoded');
      // options.body = params.toString();
      // options.method = 'post';

   console.log(
      this.http.post(Spotify.tokenUrl, params.toString(), options).subscribe()
      ) 

  }

我仍然有错误：/标题没有添加：/

我做了一些调查，测试。当我尝试仅发送＆＃39; Content-type = application / x-www-form-urlencoded＆＃39;我得到了回复，其中包含错误的“客户端错误”＃39;因为我没有发送授权书。当我尝试使用授权添加另一个标题时出现问题。

我与GET方法类似，我只能添加＆＃39;授权＆＃39;标题，没有其他。如果我添加了例如＆＃34; X-Authorization＆＃34;标题，GET方法更改为OPTIONS方法，如POST：/

在控制台中我收到错误：

XMLHttpRequest无法加载https://accounts.spotify.com/api/token。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:4200＆＃39;因此是不允许的访问。

有没有办法在http post请求中的一个标题中提供更多内容？

我只在body中添加了Content-Type标头。我得到了400个代码的回复，因为我的请求没有授权标题。在firefox中，我通过向头文件添加Authorization编辑了这个请求，我得到了我想要的代码200和令牌:) 所以问题在于Angular而不是浏览器。

====编辑==== Spotify说我不应该使用clientid和client + secret。我应该用这个：

 let options = new RequestOptions()
      options.headers = new Headers();
      options.params = new URLSearchParams();
      options.params.append('client_id', Spotify.clientId);
      options.params.append('redirect_uri', 'http://localhost:4200/callback');
      options.params.append('scope', 'user-read-private user-read-email');
      options.params.append('response_type', 'token');
      options.params.append('state', '789935');

this.http.get('https://accounts.spotify.com/authorize', options )
        .subscribe(
          res=> {
            console.log('res',res)
          }
        )

现在我得到200，但没有显示回叫。在控制台我有：

XMLHttpRequest cannot load https://accounts.spotify.com/authorize?client_id=2100FakeClientId45688548d5a2b9…scope=user-read-private%20user-read-email&response_type=token&state=789935. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

这来自＆＃34;回调：1＆＃34;

我为回调和callbackComponent

做了路线

import { Component } from '@angular/core';
// import { AuthService } from './auth.service';

@Component({
  template: `<h2>callback</h2>`
})
export class CallbackComponent {

}

但是在控制台中我还有错误：/

localhost/:1 XMLHttpRequest cannot load https://accounts.spotify.com/authorize?client_id=21006d1ceeFakeClient548d5a2b9…scope=user-read-private%20user-read-email&response_type=token&state=789935. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

但这次是来自本地主机/：1

在邮递员中，我需要完整的HTML才能重定向。如何在Angular 2中进行此重定向

Answer 1

好吧，如果你使用的是最新的角度HttpClient，那很容易。查看示例。

this.httpClient.post(url, body, {
      headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.getAuthAccessToken())
      .set('Content-Type', 'application/json') 
    })

希望它有所帮助。感谢

Answer 2

您可以使用拦截器在每个请求中添加标题：

本教程将帮助您实现这一目标：

https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Answer 3

你可以像那样设置标题

 let options = new RequestOptions();
    options.headers = new Headers();
    options.headers.append('Authorization', 'Basic ' + btoa(Spotify.clientId + ':' + Spotify.clientSecret));
    options.headers.append('Content-Type', 'application/x-www-form-urlencoded');

另外，在Angular 5中 新课程介绍，以便您轻松设置

header = new HttpHeaders();
header.set('Content-Type', 'application/x-www-form-urlencoded');

Answer 4

我的工作和工作是

  this.options = new RequestOptions({
    headers: new Headers({
      'header1': 'value1',
      // And more
    })
  });

我在请求中使用this.options。

希望这有助于你

Answer 5

在不使用new Headers()的情况下将多个标头添加到http帖子的一种方法是：

$http.post(url, entity, {
    headers: {
      customHeader1: customHeader1Value,
      customHeader2: customHeader2Value
    }
  }).then(...

希望对您有帮助。

Angular 2/4如何向http

5 个答案: