web-dev-qa-db-ja.com

http post-Authorizationヘッダーを送信する方法は？

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

accept-Encodingに追加されたsdch：

Accept-Encoding:gzip, deflate, sdch

残念ながら、Authorizationヘッダーはありません。どうすれば正しく追加できますか？

私のコードによって送信されたリクエスト全体は次のようになります。

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
resthttpauthenticationangulartypescript
40
Maciej Treder

OK。問題が見つかりました。

Angular側ではありませんでした。正直に言うと、まったく問題はありませんでした。

リクエストを正常に実行できなかった理由は、サーバーアプリがOPTIONSリクエストを適切に処理していなかったためです。

なぜPOSTではなくOPTIONSなのか？私のサーバーアプリは別のホストにあり、フロントエンドにあります。 CORSのため、私のブラウザーはPOSTをOPTIONに変換していました： http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

この回答の助けを借りて： スタンドアロンSpring OAuth2 JWT承認サーバー+ CORS

サーバー側アプリに適切なフィルターを実装しました。

@Supamiuに感謝します-私はPOSTをまったく送信していないと私に知らせてくれました。

26
Maciej Treder

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

15
kTn

サブスクライブする前に結果をマッピングする必要があると思います。次のように構成します。

  updateProfileInformation(user: User) {
    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);

    var t = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + t;
    var body = JSON.stringify(user);

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers })
      .map((response: Response) => {
        var result = response.json();
        return result;
      })
      .catch(this.handleError)
      .subscribe(
      status => this.statusMessage = status,
      error => this.errorMessage = error,
      () => this.completeUpdateUser()
      );
  }
6
John Baird

あなたが私のようで、角度/イオン型のTypeScriptを主演している場合、.

  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,
      });
  }
2
Adam Cox

同じ問題がありました。これは、angularドキュメントと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));
}); }}
1
Othmane Daânouni

質問に対する詳細な回答は次のとおりです。

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 ''ヘッダーがありません。 Origin '' http：// localhost：42 ''はアクセスを許可されていません

  • プリフライトの応答にHTTP okステータスがありません。

https://stackoverflow.com/a/52620468/3454221 で詳細な答えを見つけてください

0
Trilok Pathak