`mode: 'no-cors'` が失敗した場合に、Fetch を使用して異なるオリジンからリソースにアクセスするにはどうすればよいですか?

モード: no-cors で Fetch を使用しようとしています

この記事では、モードで fetch を使用する場合の問題に対処します。 「no-cors」を選択し、CORS を無効にする実行可能な代替案を検討します。

問題

外部 API など、異なるオリジンからリソースにアクセスしようとすると、ブラウザーは同一オリジン ポリシーと呼ばれるセキュリティ対策を実装します。このポリシーは、サーバーが適切な CORS ヘッダーで応答しない限り、JavaScript コードが他のオリジンのリソースに直接アクセスすることを防ぎます。

「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません」というエラーが発生した場合、" これは、データを取得しようとしているサーバーが、現在のオリジンからのリソースへのアクセスを許可していないことを意味します。

無効化CORS

フェッチ リクエストで mode: 'no-cors' を設定しても、実際には CORS が無効になるわけではないことに注意することが重要です。代わりに、フロントエンド JavaScript コードが応答本文とヘッダーにアクセスできなくなります。ほとんどの場合、これは意図したものではありません。

CORS プロキシの使用

推奨される解決策は、CORS プロキシを使用することです。 CORS プロキシは、フロントエンド コードとターゲット サーバーの間の仲介者として機能します。ターゲット サーバーにリクエストを送信し、応答を受信し、必要な CORS ヘッダーを追加して、変更された応答をフロントエンド コードに返します。これにより、フロントエンド コードが同一生成元ポリシーに直接違反することなくリソースにアクセスできるようになります。

独自の CORS プロキシのデプロイ

次の手順に従って、独自の CORS Anywhere プロキシを簡単にデプロイできます。

1. CORS Anywhere リポジトリのクローンを作成します: git clone https://github.com/Rob--W/cors-anywhere.git
2. cors-anywhere ディレクトリに変更します: cd cors-anywhere/
3. 依存関係をインストールします: npm install
4. Heraku アプリを作成します: heroku create
5. にコードをプッシュしますHeroku: git Push heroku master

これらの手順を完了すると、独自の CORS Anywhere サーバーが Heroku 上で実行されるようになります。

CORS プロキシの使用

使用するにはCORS プロキシの場合は、リクエスト URL の前にプロキシ URL を付けるだけです。例:

https://cryptic-headland-94862.herokuapp.com/https://example.com

CORS プロキシを使用すると、同一生成元ポリシーをバイパスし、フロントエンド コードで異なる生成元のリソースにアクセスできます。

以上が`mode: 'no-cors'` が失敗した場合に、Fetch を使用して異なるオリジンからリソースにアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。