Angular 2 Basic認証が機能しない

Question

Angular2を使用してAPIにPOSTリクエストを接続しようとしていますが、基本認証パスワードを持つ非常に簡単なAPIです。 apiでパスワードを無効にすると、すべてが期待どおりに機能します。しかし、基本認証を有効にすると、AngularはAPIに接続できなくなります。郵便配達郵便ですべてが働く。私は成功せずに次のことを試みた。

私はこれらの2つのヘッダを試してみた

headers.append("Content-Type", "application/x-www-form-urlencoded"); 

2つのヘッダ "Content-Typeの" と "認可" を持っています。私は見つけることができます

headers.append("Authorization", "Basic " + btoa(Username + ":" + Password)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ="); 

唯一のことは、RAWリクエストヘッダのヘッダ名を持つ唯一のラインがあることですが、値が不足している：

Access-Control-Request-Headers: authorization, content-type 

生ヘッダ：

#Request Headers 
OPTIONS /shipment HTTP/1.1 
Host: api.example.com 
Connection: keep-alive 
Access-Control-Request-Method: POST 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept: */* 
Referer: http://localhost:4200/address 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8,nl;q=0.6 

希望者がお手伝いします

Answer 1

お客様のリクエストにカスタムヘッダーを追加する簡略化されたバージョン：

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

@Injectable() 
export class ApiService { 

    constructor(private _http: Http) {} 

    call(url): Observable<any> { 
     let username: string = 'username'; 
     let password: string = 'password'; 
     let headers: Headers = new Headers(); 
     headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
     headers.append("Content-Type", "application/x-www-form-urlencoded"); 
     return this._http.post(url, data, {headers: headers}) 
    } 
} 

実際のhttpのコードがないので、間違った場所を特定するのは難しいです。しかし、この例はあなたのために働くはずです

Answer 2

私のアプリケーションで同じ問題がありました。

あなたはsendedではれるリクエストがPOSTが、OPTION（事前検証）されていない見ることができるように

https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS

あなたのAPI側のOPTIONS要求を許可しなければなりません。 あなたはちょうど春のセキュリティ設定にこれを追加することができSpringアプリケーションがある場合：私の場合は

protected void configure(HttpSecurity http) throws Exception { 
     http.csrf().disable() 
       .authorizeRequests() 
       **.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()** 
(..) 

} 

を、それが

Answer 3

に動作しますこれは私の問題を解決しました：
Angular2 http post - how to send Authorization header?

[OK]をクリックします。私は問題を発見した。

角度側にはありませんでした。正直言って、全く問題はありませんでした。

私の要求をうまく実行できなかった理由は、私のサーバーアプリケーションがOPTIONS要求を適切に処理していなかったからです。

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

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

私は、サーバー側のアプリケーションに適切なフィルタを実装しました。

@Supamiuのおかげで私はPOSTをまったく送信していないと私に指摘した人物です。

Answer 4

jrcastilloは別のオプションは、私はこの問題を解決しようとするように多くの時間を過ごし、この1つのライナーは私の問題を解決しhere

を示唆しました。

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**"); 
} 

私が代わりに以下でしたので、これは私の/ログインパスを行なうように私は最終的にはもう少し特異的であった：

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**"); 
} 

Answer 5

問題は、バックエンドサーバです。どのブラウザーからも原点通過要求を行うプリフライト要求が送信されます。この場合のバックエンドサーバーは、プリフライトリクエストを正常に処理していません。バックエンドサーバーでcors設定を実行してみてください。それがこの問題を解決します。