2022年にCorsプリフライト/オプションエラーを処理する方法

TLドクター
参考文献flow chart 私はこのポストのために作成しました.

はじめに: Corsとはプリフライトとは何かオプションメソッドは何ですか?The CORS クロス起源リソース共有を表します.ブラウザーがスクリプトから始められるクロス起源HTTP要求を制限するので、現在見られたウェブサイトが他のウェブサーバ(十字起源)からJSONのような資源を取り出そうとしているとき、それは重要です.
安全上の注意として、元の要求を送信する前に、ブラウザはpreflight request 元のリクエストで使用されるHTTPメソッドとヘッダーの両方のヘッダーを含みます.プリフライトリクエストはHTTPを使用しますOPTIONS メソッド.
より正確な定義と関連した議論のために.The official document 最高です.
このポストの残りの部分は、一般的な状況の質問とそれらを解決するための答えを説明します.
質問1 :Options リクエストはバックエンドdevサーバに送られますが、応答ステータスコードは405です(メソッドが許されません).フロントエンドは、問題を解決するために何をすべきですか?

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://cors-2022.com. (Reason: XXX).

アンサー1
以下の2つの選択肢のいずれかを採用することができます.

バックエンドにオプションメソッドを処理するよう頼みます.事前飛行要求は避けられないし、いくつかの状況でセキュリティ上の理由に適しています.

プリフライト要求から単純なリクエストへの切り替えの可能性を考えてください.簡単なリクエストは、Corsプリフライトをトリガしません.

あなたの要求を簡単にするには、すべての条件を満たす必要が書かれてhere .
質問2 :バックエンドのdevチームは、サーバースタブの自動生成Swagger Codegen フロントエンドのdevチームに.しかし、私はオプションメソッドに関連するいくつかのCorsエラーを見ます.
アンサー2
あなたは、以下の最後の3つの選択肢のうちの1つを採用することができます.

いけない✋) 手動でスタブの実装を手動で変更します.サーバスタブがもはや自動生成されることができないので、それは貧しい選択です.

あなたのアプリはVueまたは反応から作られていると仮定します.次に、Reactive dev server proxyなどのフレームワーク組み込みプロキシ機能を使用します.this post ) or Vue Proxy

一般的なプロキシツールを使用しますCORS Anywhere . このプロキシはリクエストヘッダを操作して、CORS保護を一時的に回避します.

などのブラウザ拡張を使用しますAllow CORS