web-dev-qa-db-ja.com

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 question httpリクエストのヘッダーにヘッダーを追加しましたが、問題は解決しません。 （それでも同じエラーが発生します）。

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

javascriptreactjshttpcorsfetch-api
5
Thidasa Pankaja

そのAPIは寛容であるように見え、Access-Control-Allow-Origin:*

私はあなたの問題の原因を理解していませんが、単に fetch API であるとは思いません。

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

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

プロキシソリューションを使用する必要がありますが、プロキシの代わりにクライアントのIPを渡します。以下は、WikiMediaのIPを使用して指定したAPIのURL形式の例です。

http://ip-api.com/json/208.80.152.201

2
Tallboy