AngularJS アプリケーションで「プリフライト リクエストがエラーで失敗しました: 無効な HTTP ステータス コード 404」が表示されるのはなぜですか?

プリフライト リクエストがエラーで失敗する: 無効な HTTP ステータス コード 404

AngularJS アプリケーションで POST リクエストを実行しようとすると、次のエラー メッセージ:「プリフライトの応答に無効な HTTP ステータス コード 404 があります。」このエラーは、Cross-Origin Resource Sharing (CORS) ポリシーの問題が原因で発生します。

CORS ポリシーは、ほとんどの最新のブラウザーに実装されており、Web アプリケーションが他のドメインに安全にリクエストを送信できるようにします。実際のリクエストを行う前に、ブラウザはサーバーにプリフライト リクエスト (OPTIONS) を送信し、サーバーが送信元ドメインからのリクエストを許可しているかどうかを確認します。

この問題を解決するには、サーバーがプリフライトに応答することを確認してください。適切なヘッダーを含むリクエスト。具体的には、サーバーは次のように設定する必要があります。ヘッダー:

• Access-Control-Allow-Headers
• Content-Type
• Access-Control-Allow-Methods
• Access-Control- Allow-Origin

たとえば、 SlimPHP では、response().headers() メソッドを使用してこれらのヘッダーを設定できます:

<code class="php">$app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');
$app->response()->headers->set('Content-Type', 'application/json');
$app->response()->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
$app->response()->headers->set('Access-Control-Allow-Origin', '*');</code>

さらに、AngularJS 構成を変更して自動プリフライト処理を無効にする必要がある場合があります:

<code class="js">app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});</code>

プリフライトリクエストを処理するようにサーバーを設定し、AngularJS での自動プリフライト処理を無効にすることで、次から正常に POST リクエストを行うことができます。 AngularJS クライアントをサーバーに接続します。

以上がAngularJS アプリケーションで「プリフライト リクエストがエラーで失敗しました: 無効な HTTP ステータス コード 404」が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。