web-dev-qa-db-ja.com

フェッチAPIでCORSを有効にする

次のエラーメッセージが表示され、続行できません

ロードに失敗しました https：//site/data.json ：プリフライトリクエストへの応答がアクセス制御チェックに合格しません：いいえ 'Access-Control-Allow -Origin 'ヘッダーが要求されたリソースに存在します。したがって、Origin ' http：// localhost：8080 'はアクセスできません。不透明な応答がニーズを満たしている場合、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。 localhost /：1 Uncaught（in promise）TypeError：Failed to fetch

反応jsファイルでCORSを有効にしようとしていますが、期待した結果を得ることができませんでした。 chrome拡張機能をインストールしましたが、機能します。しかし、本番サイトでこれを使用するには、コード内で有効にする必要があります。 CORSを有効にするためにコードを適切に配置する方法.

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {
javascriptreactjsfetch-api
12
johntanquinco

ブラウザのクライアント側にはクロスドメインセキュリティがあり、サーバーがドメインからデータを取得できることを確認します。 Access-Control-Allow-Originが応答ヘッダーで使用できない場合、ブラウザーはJavaScriptコードで応答を使用することを許可せず、ネットワークレベルで例外をスローします。サーバー側でcorsを構成する必要があります。

mode: 'cors'を使用してリクエストを取得できます。この状況では、ブラウザはクロスドメインの実行をスローしませんが、ブラウザはJavaScript関数で応答しません。

したがって、両方の条件で、サーバーでcorsを構成するか、カスタムプロキシサーバーを使用する必要があります。

9
Kishan Mundha