web-dev-qa-db-ja.com

プリフライトの応答の角度がHTTP OKステータスになっていません

私のサービスでは、次のgetリクエストを定義しています。

createAuthorizationHeader(user, pass) {
  let headers: HttpHeaders = new HttpHeaders;
  headers = headers.append('Accept', 'application/json, text/plain, */*');
  headers = headers.append('Authorization', 'Basic ' + btoa(user + ':' + pass));
  headers = headers.append('Content-Type', 'application/json; charset=utf-8');
    console.log(headers);
    return this.http.get(this._loginUrl, {
      headers: headers
    });
}

年です。結果：

OPTIONS https://localhost:8443/delivery/all 401 ()

Failed to load https://localhost:8443/delivery/all: Response for preflight does not have HTTP ok status.

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

私もPostmanを使って同じ投稿要求をしましたが、すべてがうまくいったので、ローカルサーバーもうまくいきました。

私は自分の要求で何が悪いのかわからない。

angularhttpcors
16
KalinJa

CORS契約では、飛行前のOPTIONS要求では認証が不要であることが要求されています。バックエンドがOPTIONSリクエストとGETに対する認証を要求しているようです。

あなたがPostmanであなたのバックエンドにアクセスするとき、あなたはGETを送るだけです。ブラウザは最初にOPTIONSリクエストを（認証ヘッダなしで）送信し、リクエストを行っているページのOriginと一致する "Access-Control-Allow-Origin"ヘッダを持つレスポンスを探します。

OPTIONSレスポンスに対するレスポンスが2xxではない場合、またはヘッダが存在しない場合、あるいはヘッダの値がリクエストしているページのOriginと一致しない場合は、発生しているエラーが発生し、GETリクエストは行われません。 。

TLDR;ログインURLを処理するときにOPTIONSメソッドの認証を要求しないようにバックエンドを変更してください。

24
GreyBeardedGeek

デフォルトでは、ブラウザはユーザがCross-Originリクエストを実行することを許可しません。

このエラーを回避するためにAngularからプロキシ設定を使用できます。

Angle uiがlocalhost：4200で動作していて、休憩の終点のURLを呼び出したいとします。例： https：// localhost：8443/delivery/all

以下の手順でこの問題を解決します。

  1. Angular Applicationのルートフォルダにproxy.config.jsonファイルを作成します。 （package.jsonファイルが存在する場所）プロキシは単に、アプリケーションが実行されているのと同じドメイン+ポートでブラウザの要求を受け取り、その要求をバックエンドAPIサーバーに転送します。 CORSはブラウザのセキュリティ上の問題であり、その間にプロキシがある場合のように「バックエンド間」の通信を行う場合には適用されません。

    内容は次のようになります。

    サンプル：

    {
    "/delivery/all/*": {
    "target": "https://localhost:8443",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
    }
}

    アプリケーション内から/ delivery/all/...へのすべてのリクエストは https：// localhost：8443/delivery/all / に転送されます。

    注：changeOriginプロパティバックエンドでいくつかの仮想プロキシ（Apache2で設定されたものなど）を使用している場合は、必ずこれをtrueに設定する必要があります。

  2. アプリケーションの実行中にプロキシ設定を追加してください。 Angularはプロキシ設定ファイルを指定できる "--proxy-config"をサポートしています。テストに "npm start"オプションを使用している場合は、以下のように "--proxy-config"オプションを追加する必要があります。 package.jsonファイルに追加する必要があります。

     "scripts": {

"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

    "ng serve"を使って直接実行している場合は、以下のように変更されています。 "ng serve --proxy-config proxy.config.json"

  3. Angularアプリケーション内のHTTP呼び出しはこれに変更できます。サーバーは自動的にリクエストを " https：// localhost：8443/delivery/all "に転送します。

    this.http.get（ ' https：// localhost：8443/delivery/all '）.map（res => res.json（））;

    に

    this.http.get（ '/ delivery/all'）.map（res => res.json（））;

ここに詳細情報へのリンクです： https://sudhasoftjava.wordpress.com/2018/10/05/proxy-configuration-in-angular/

5
Sudhakar

@ダリル

これまでに行ったことは、Corsのカスタム構成を追加することです。その後、Javaサーバーのセキュリティー構成を介してそれを有効にします。回答で説明されているように、このサーバーは直接REST呼び出しに対してのみ有効です。

@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                        .allowedHeaders("*");
            }
        };
    }
}

そしてこれはWebセキュリティ設定に入ります。

@Override
    protected void configure(final HttpSecurity http) throws Exception {
        http.csrf().disable()
                .antMatcher("/**")
                .authorizeRequests().and()
                .httpBasic()
                .and()
                .authorizeRequests().anyRequest().authenticated().and().cors();
    }
0
thunder88