AngularJS POST リクエストを行うときに「プリフライトの応答に無効な HTTP ステータス コード 404 があります」というエラーが表示されるのはなぜですか?

AngularJS POST の失敗: CORS とプリフライト リクエストについて

はじめに

AngularJS 間の HTTP 対話、特に POST リクエストの実行アプリケーションとバックエンド サーバーで問題が発生することがあります。よく発生するエラー メッセージの 1 つは、「プリフライトの応答に無効な HTTP ステータス コード 404 があります。」です。この記事は、このエラーを明らかにし、解決策を提供することを目的としています。

CORS およびプリフライト リクエスト

Cross-Origin Resource Sharing (CORS) は、ブラウザーが使用するメカニズムです。異なるオリジン間のネットワークリクエストを管理します。ブラウザがオリジン (例: http://localhost:8080) から別のオリジン (例: http://example.com) にリクエストを送信するとき、最初に OPTIONS メソッドを使用してプリフライト リクエストを送信し、サーバーが実際のリクエストを許可します。

エラーについて

エラー「プリフライトの応答に無効な HTTP ステータス コード 404 が含まれています」というエラーは、ブラウザによって送信されたプリフライト OPTIONS リクエストがHTTP ステータス コード 404 (見つかりません) を返します。これは、サーバーがプリフライト リクエストに正しく応答していないことを意味します。

解決策

このエラーの解決策は、サーバー側で CORS プリフライト リクエストを適切に処理することです。 。質問で提供されている SlimPHP の例では、プリフライト リクエストが処理されず、404 ステータス コードが返されるという問題があります。

これを修正するには、SlimPHP サーバーに次のコードを追加する必要があります。

<code class="php">$app->options('/{routes:.+}', function ($request, $response, $args) {
    return $response;
});</code>

このコードは、アプリケーション内のすべてのルートに対するキャッチオール CORS プリフライト リクエスト ハンドラーを定義します。必要な CORS ヘッダーを設定し、空の応答を返します。

追加のヒント

さらに、次のヒントは CORS 関連の問題を防ぐのに役立つ可能性があります:

• あらゆるオリジンからのリクエストを許可するには、Access-Control-Allow-Origin ヘッダーが「*」に設定されていることを確認してください。
• クライアント側で CORS チェックが必要ない場合は、CORS チェックを無効にすることを検討してください。
• Access-Control-Max-Age ヘッダーを設定して、ブラウザーが CORS プリフライト応答ヘッダーをキャッシュする期間を指定します。

次の手順に従うことで、CORS 関連を解決できます。問題を解決し、AngularJS アプリケーションからの POST リクエストを成功させます。

以上がAngularJS POST リクエストを行うときに「プリフライトの応答に無効な HTTP ステータス コード 404 があります」というエラーが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。