[解決済み] Fetch APIのCORSの問題を解決する方法

質問

reactjsを使って、フロントエンドだけの基本的な天気予報アプリを作っています。APIリクエストには、Fetch APIを使用しています。 私のアプリでは、現在地を 簡易API 私が見つけた で、それはJSONオブジェクトとして位置情報を提供します。しかし、Fetch APIでリクエストすると、このエラーが発生します。

Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

そこで、これを解決するために検索してみたところ、複数の解決策が見つかりました。

1. ChromeでCORSを有効にするとエラーは解決しますが、アプリをherokuにデプロイしたときに、同じCORS問題に遭遇せずにモバイルデバイスからアクセスするにはどうしたらよいでしょうか。
2. を発見しました。 プロキシAPI で、CORS リクエストを有効にします。しかし、これは位置情報のリクエストであるため、プロキシサーバーの位置がわかってしまいます。そのため、解決策にはなりません。
3. 私は、この Stackoverflowの質問 を追加し、httpリクエストのヘッダーに追加しましたが、問題は解決していません。(まだ同じエラーが出ます)。

では、どうすればこの問題を永久に解決できるのでしょうか？Fetch API の http リクエストの CORS 問題を解決するために使用できる最良のソリューションは何ですか？

どのように解決するのですか？

そのAPIは寛容なようで、次のように応答します。 Access-Control-Allow-Origin:*

何が原因なのかはまだわかっていませんが、単純に フェッチAPI .

これは、FirefoxとChromeの両方でうまくいきました...

fetch('http://ip-api.com/json')
   .then( response => response.json() )
   .then( data => console.log(data) )