Origin 'localhost：3000'から '...'でのXMLHttpRequestへのアクセスがCORSポリシーによってブロックされました

これは重複している可能性がありますが、私の問題に特に関連するスレッドは見つかりませんでした。

次のAPI呼び出しを行っています。

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};

const {
  data: { ip }
} = await axios.get("https://api.ipify.org?format=json", config);

そして、これはエラーを投げます：

Access to XMLHttpRequest at 'https://api.ipify.org/?format=json' from Origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

アプリをHerokuにデプロイすると、API呼び出しは期待どおりに機能します。ただし、ローカルマシンで開発する場合は機能しません。ここで何が欠けているのかわかりません。

reactjscorsaxios

2019/07/12Mike K

Package.jsonファイルに移動して、「proxy」：「your-api-url」を追加しますが、先頭/ベースのみです。例として、ポケモンAPIを使用している場合は、「proxy」を設定するだけです。 https://pokeapi.co/api/v2 "とサービスファイルで、必要なパスでaxiosを使用できます。

axios.get("/pokemon?limit=1000") .then(response => { resolve(response.data.results); })

2019/11/21Gustavo Magnago

この記事すぐに問題を解決しました。

あなたが作ることができる最も速い修正は moesif CORS拡張をインストールすることです。インストールしたら、ブラウザでクリックして拡張機能を有効にします。アイコンのラベルが「オフ」から「オン」になっていることを確認します

2020/01/22Yannick Lescure