React Appの作成アクセス制御の許可Originの問題

Question

私はcreate-react-appで作成した天気予報アプリを導入しました。開発では、私はアクセスコントロールの起源を可能にクロムの拡張子を使用します。今ではgithubのページで展開されていることを、私はエラーを取得しています：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://boka44.github.io ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

私は自分のサーバーにヘッダを追加する必要があるように思えるが、私はどこでどのようにそれを追加するにように混乱しています。

私のコードはここにある：https://github.com/Boka44/weather

すべてのヘルプが深くいただければ幸いです。

Answer 1

呼び出しているAPIエンドポイント（天気情報を提供するもの）は、CORSを無効にしています。つまり、ブラウザがコールをブロックするため、クライアントに直接呼び出すことはできません。あなたはAPIエンドポイントを変更することができる場合

• ：

  あなたはここに2つのオプションを持っているあなたは、あなたのクライアントアプリケーションのドメインからの起源を許可するようにCORSヘッダーを追加することができます。

• サーバーコードを変更できない場合：元のAPIエンドポイントを呼び出し、クライアントアプリケーションが独自のAPIを呼び出すように独自のAPIエンドポイントを作成します。 （つまり、呼び出しを元のAPIエンドポイントに誘導するプロキシサーバーを作成するだけです）。この場合、サーバー上にCORSヘッダーを指定して、クライアントアプリケーションドメインからの呼び出しのみを許可することができます。

Answer 2

Dark Sky API docsは、CORSを許可していないと言います。したがって、サーバーからクライアント側のコードにデータを取得することはできません。 PHPやその他のプラットフォームではproxy serverを作成し、apiを呼び出してJSON形式の応答を生成します。