web-dev-qa-db-ja.com

Angular 2基本認証が機能しない

私は、Angular2を使用したAPIへのPOST要求を接続/実行しようとしています。これは、基本認証パスワードを使用した非常に単純なAPIです。基本認証を有効にすると、AngularはAPIに接続できなくなります。Postmanではすべて機能します。

「Content-Type」と「Authorization」の2つのヘッダーがあります

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

これら2つのヘッダーを試しました。

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

誰かが助けてくれることを願っています

angulartypescriptheaderbasic-authentication
23
Peter

リクエストにカスタムヘッダーを追加する簡易バージョン：

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呼び出しのコードがないため、どこが間違っているのかを判断するのは困難です。しかし、この例はあなたのために働くはずです

26
PierreDuc

jrcastillo 別のオプションを提案 here

私はこれを修正しようとして非常に多くの時間を費やし、この1つのライナーは私の問題を解決しました。

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

これは私の/ loginパスに影響したため、最終的にはもう少し具体的でしたので、代わりに次のことを行いました：

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

アプリケーションでも同じ問題が発生しました。

ご覧のとおり、送信されたリクエストはPOSTではなくOPTION（事前検証）ではありません

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

API側でOPTIONSリクエストを許可する必要があります。 Springアプリケーションがある場合は、これをSpring Security構成に追加するだけです。

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

}

私の場合、それは動作します

2
VANILKA

これは私の問題を解決しました：
Angular2 http post-Authorizationヘッダーの送信方法

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.

2
Michal

問題はバックエンドサーバーにあります。ブラウザは、クロスオリジンリクエストを行うプリフライトリクエストを送信します。この場合のバックエンドサーバーは、プリフライトリクエストを正常に処理していません。バックエンドサーバーでcors設定を実行してください。これでこの問題は解決します。

0
Siddhant