5

Google Places API からの写真を使って取り組んでいるこのプロジェクトで、パブリック アート用に持っている写真のコレクションを増やそうとしています。ここには、詳細リクエストを送信して 10 枚の写真の配列を取得できると書かれています。最終的には、応答をアンパックして各写真の Google の写真参照を取得し、配列内の各写真を要求して表示します。

残念ながら、詳細リクエストを送信すると、この計画は破綻します。これは私が得ている正確なエラーです:

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' 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.

これをローカルホストから実行していますが、それが重要であると確信しています。私の他のすべての API 呼び出し (Google Maps API と他のいくつか) は、これとまったく同じように記述されているため、なぜエラーが発生するのか少し混乱しています。関連するコードは次のとおりです。

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) => {
      if (response.status >= 400){
        throw new Error("Error getting photos for placeID: " + placeID)
      }
      return response.json()
    })
}

他に情報が必要な場合はお知らせください。喜んで提供させていただきます。ありがとう！

4

3 に答える 3

2

このエラーを防ぐには、サーバー側のプロキシを使用する必要があります。URL に直接アクセスすると、オリジンがないため機能します。

  • JS ローカル サーバーへの AJAX 要求 -> リモート サーバー、要求の受信、応答の送信、リモート サーバー -> ローカル サーバー -> JS への AJAX 要求。

この関連するSOの質問を確認してください：

CORS が有効になるように API サーバーを変更するか、webpack-dev-serverページの「既存のサーバーと組み合わせる」の手順に従って、アセット サービングを webpack-dev-server および独自の API サーバーと組み合わせることができます。

お役に立てれば！

于 2016-07-24T15:32:50.913 に答える