Angular 2/4如何将多个标头添加到http帖子

Question

我有问题为html帖子添加额外的标题.与curl一起工作非常像邮递员.我无法添加授权标头来发布请求.

我的问题类似于/sf/ask/2758588941/

我的代码:

 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并获取一个错误为400的get invalid_client

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()
) 
}

现在,如果我评论'授权'Content-Type被添加到请求与AUthorization我没有添加标题,也没有发送正文

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

根据这个主题Angular2 - 为我创建的每个请求设置标头 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()
      ) 

  }

我还有错误:/没有添加标题:/

我做了一些调查,测试.当我尝试只发送'Content-type = application/x-www-form-urlencoded'时,我收到错误'bad client'的回复,因为我没有发送授权.当我尝试使用Authorization添加另一个标头时出现问题.

我用GET方法做了类似的工作,我只能添加'Authorization'标题,没有其他方法.如果我添加了例如"X-Authorization"标题,那么GET方法就像在POST中一样改为OPTIONS方法:/

在控制台中我得到错误:

XMLHttpRequest无法加载https://accounts.spotify.com/api/token.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问.

有什么方法可以在http post请求中的一个标题中提供更多内容吗？

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

==== EDITED ==== 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.

这来自"回调:1"

我为回调和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.

但这一次来自'localhost /:1

在邮递员我het完整的HTML重定向.如何在Angular 2中进行此重定向

Answer 1

好吧,如果你使用最新的角度HttpClient,它很容易.查看示例.

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

希望能帮助到你.谢谢