104

ヘッダーに CORS を追加しましたが、リクエストでまだ CORS の問題が発生しています。CORS やその他のリクエストをヘッダーに追加して処理する正しい方法は何ですか?

サービス ファイルのコードは次のとおりです。

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

エラー：

プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン「http://localhost:4200」へのアクセスは許可されていません

失敗しました: (不明な URL) の HTTP 失敗応答: 0 不明なエラー

サーバー側のコードでは、インデックス ファイルに CORS を追加しました。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
4

8 に答える 8

2

Angular 6 の httpClient を使用した POST も OPTIONS リクエストを実行していました。

ヘッダー 一般:

リクエストURL：https://hp-probook/perl-bin/muziek.pl/=/postData
依頼方法：OPTIONS
ステータスコード:200 OK
リモートアドレス:127.0.0.1:443
リファラー ポリシー: no-referrer-when-downgrade

私の Perl REST サーバーは、リターン コード 200 で OPTIONS リクエストを実装しています。

次の POST リクエスト ヘッダー:

承認：*/*
Accept-Encoding:gzip、deflate、br
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:コンテンツ タイプ
Access-Control-Request-Method:POST
接続:キープアライブ
ホスト:hp-probook
オリジン:http://localhost:4200
リファラー:http://localhost:4200/
ユーザーエージェント:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Gecko のような KHTML) Chrome/59.0.3071.109 Safari/537.36

Access-Control-Request-Headers:content-type に注意してください。

したがって、私のバックエンド perl スクリプトは次のヘッダーを使用します。

-"アクセス制御許可元" => '*',
 -"Access-Control-Allow-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS',
 -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

このセットアップでは、GET と POST が機能しました。

于 2018-07-25T22:40:08.077 に答える
-8

何時間も試した後、次のことがうまくいきました

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

ただし、次のコードは機能しませんでした。理由は不明です。誰かがこの回答を改善できることを願っています。

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })
于 2019-02-10T19:26:04.237 に答える