http post - 如何发送Authorization标头?

时间:2016-09-09 09:35:54

标签: rest http authentication angular typescript

如何在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
}

问题是,angular不会添加Authorization标头。而不是那样,在请求中我可以看到以下附加标题:

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

和sdch在Accept-Encoding中添加:

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

7 个答案:

答案 0 :(得分:26)

确定。我发现了问题。

它不在Angular方面。说实话,完全没有问题。

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

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

借助这个答案: Standalone Spring OAuth2 JWT Authorization Server + CORS

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

感谢@Supamiu - 指责我的人,我根本不发送POST。

答案 1 :(得分:15)

您需要RequestOptions

 let headers = new Headers({'Content-Type': 'application/json'});  
 headers.append('Authorization','Bearer ')
 let options = new RequestOptions({headers: headers});
 return this.http.post(APIname,body,options)
  .map(this.extractData)
  .catch(this.handleError);

了解更多信息link

答案 2 :(得分:6)

我认为您需要在订阅之前映射结果。您可以这样配置:

echo date("Y-m-d H:i", strtotime("20/10/2014 05:39 PM"));

答案 3 :(得分: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(
        {
          'Access-Control-Allow-Origin': 'https://localhost:5100',
          'Access-Control-Allow-Methods': 'POST',
          'Content-Type': 'application/pdf',
          'Authorization': 'Bearer ' + token,
          'Accept': '*/*',
        }),
        //responseType: ResponseContentType.Blob,
      });
  }

答案 4 :(得分:1)

我有同样的问题。这是我使用角度文档和firebase令牌的解决方案:

getService()  {

const accessToken=this.afAuth.auth.currentUser.getToken().then(res=>{
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': res
    })
  };
  return this.http.get('Url',httpOptions)
    .subscribe(res => console.log(res));
}); }}

答案 5 :(得分:0)

这是该问题的详细答案:

  

从Angular端将数据传递到HTTP标头中(请注意,我是   在应用程序中使用Angular4.0 +。

我们可以通过多种方式将数据传递到标头中。 语法不同,但是含义相同。

// Option 1 
 const httpOptions = {
   headers: new HttpHeaders({
     'Authorization': 'my-auth-token',
     'ID': emp.UserID,
   })
 };


// Option 2

let httpHeaders = new HttpHeaders();
httpHeaders = httpHeaders.append('Authorization', 'my-auth-token');
httpHeaders = httpHeaders.append('ID', '001');
httpHeaders.set('Content-Type', 'application/json');    

let options = {headers:httpHeaders};


// Option 1
   return this.http.post(this.url + 'testMethod', body,httpOptions)

// Option 2
   return this.http.post(this.url + 'testMethod', body,options)

在通话中,您可以找到作为标题传递的字段,如下图所示: enter image description here

还是,如果您遇到类似问题。(您可能需要更改后端/ WebAPI端)

  • 对预检请求的响应未通过访问控制检查:否 所请求的资源上存在“ Access-Control-Allow-Origin”标头。因此,不允许来源“ http://localhost:4200” 访问

  • 预检响应没有HTTP正常状态。

https://stackoverflow.com/a/52620468/3454221

查找我的详细答案

答案 6 :(得分:0)

如果您是 ruby​​ on rails 开发人员并且面临类似的问题,这是因为后端的配置:尤其是在 api 模式下 所以与 安装了 gem 'rack-cors'

转到 app/config/cors.rb

修改此文件时请务必重新启动服务器。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'domain_name:port or just use *'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head],
       credentials: true
   end
 end

*credentials:true 行可以解决问题 然后在你的 SessionController 用户有效登录后 插入一行(假设您使用的是 gem 'jwt')

token = user.generate_jwt
response.headers['Authorization'] = token

generate_jwt 是模型 User 中调用的方法,它是

JWT.encode(id, key, alogrithm)

如果您使用 django,那已经为您处理好了 你只需要使用 已安装的应用:restframework_simplejwt