JavaScript を使用してデータをフェッチする際のクロスオリジン リクエスト エラーを解決するにはどうすればよいですか?

Fetch で CORS を無効にしようとして、'Access-Control-Allow-Origin' に対処する

次のような場合によくある課題に遭遇します。 Fetch を使用してクライアント JavaScript コードからクロスオリジン リクエストを試みます。受け取ったエラー メッセージは、フェッチしようとしているエンドポイントに、クロスオリジン アクセスに必要な「Access-Control-Allow-Origin」ヘッダーが含まれていないことを示しています。

問題: Fetch でオブジェクト { mode: 'no-cors' } を使用して CORS を無効にしようとしていますが、このアプローチは不正解です。

「no-cors」モードが機能しない理由:

Fetch でモードを設定しても、CORS は無効になりません。代わりに、フロントエンド JavaScript が応答本文とヘッダーにアクセスしないようにブラウザーに指示します。通常、コードが応答にアクセスできるようにする必要があるため、この設定は通常は望ましくありません。

解決策: CORS プロキシ

この問題の解決策は次のとおりです。 CORS プロキシを使用します。 CORS プロキシは、フロントエンド コードとリモート エンドポイントの間の仲介者として機能し、応答ヘッダーを変更することでクロスオリジン リクエストを有効にします。

CORS プロキシを使用すると、プロキシ経由でリクエストを転送できます。必要な Access-Control-Allow-Origin ヘッダーを応答に追加します。これにより、フロントエンド コードは、同じオリジンから送信されているかのように応答本文とヘッダーにアクセスできるようになります。

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

プロキシをデプロイする簡単な方法独自の CORS プロキシは、次の手順に従います。

1. cors-anywhere のクローンを作成します。 GitHub リポジトリ (https://github.com/Rob--W/cors-anywhere)。
2. npm install を使用して依存関係をインストールします。
3. Heraku アカウントを作成し、heroku create を実行します。
4. git Push heroku を使用してコードを Heroku にプッシュしますmaster.

デプロイすると、https://cryptic-headland-94862.herokuapp.com のような URL で CORS プロキシが実行されます。

プレフィックスプロキシ URL を含むリクエスト URL

プロキシを使用するには、リクエスト URL の先頭に次の文字を付けます。プロキシ URL。たとえば、https://example.com を取得する場合は、次の URL を使用します:

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

リクエスト URL にプロキシをプレフィックスとして付けると、 proxy.

追加の考慮事項:

• Postman は、同一オリジン制限を無視するデバッグ ツールであるため、エンドポイントにアクセスできます。
• Fetch で mode: 'no-cors' または mode: 'opaque' を使用することは正しいアプローチではありません
• CORS はセキュリティ対策であり、安易にバイパスしないことが重要です。 CORS 制限を無効にする前に、セキュリティへの影響を常に考慮してください。

以上がJavaScript を使用してデータをフェッチする際のクロスオリジン リクエスト エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。