web-dev-qa-db-ja.com

CORSを使用してJavaScript Google Places APIリクエストを実装する方法

私はこれをどのように機能させるべきかを本当に理解していません：

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';

console.log(requestURL);

$.getJSON( requestURL, function( data ) {
  // data
  console.log(data);
});

そして私のHTMLファイル：

  <body>

        <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
        <script src="main.js" charset="utf-8"></script>   
  </body>

要求されたリソースに常にNo 'Access-Control-Allow-Origin'ヘッダーがありません。メッセージ...に移動しても https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw ブラウザで適切なJSONが返されます。

CORSが私を助けてくれると信じています。 CORSがわかりません。どうか、誰かが私に簡単な言葉で助けてもらえますか？これを機能させるには何を変更すればよいですか？

ありがとう

javascriptjsongoogle-apicors
15
Ryan Mc

クライアント側でGoogle Places API Webサービスを使用しようとしていますが、サーバー側アプリケーション用に設計されています。これが、適切なCORS応答ヘッダーがサーバーによって設定されない理由です。

プレイス詳細ドキュメントの冒頭のメモ で説明されているように、Google Maps JavaScript APIのプレイスライブラリを使用する必要があります。

クライアント側アプリケーションを構築している場合は、 Google Places API for Android 、 Google Places API for iOS 、および Places Google Maps JavaScript APIのライブラリ 。

注：まず、Google Developer ConsoleでGoogle Maps JavaScript APIを有効にする必要があります。

以下は、場所の詳細を取得する方法です（ ドキュメントの例 に基づいて）：

<head>
    <script type="text/javascript">
        function logPlaceDetails() {
          var service = new google.maps.places.PlacesService(document.getElementById('map'));
          service.getDetails({
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
          }, function (place, status) {
            console.log('Place details:', place);
          });
        }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>
</head>
<body>
    <div id="map"></div>
</body>

Google Place details output to the console

13
rd3n

@ rd3nは、GoogleマップのSDKを使用する理由についてすでに回答していますが、WebアプリでSDKの代わりにAPIを本当に使用する必要がある場合（たとえば、コードを再利用する）、proxyパラメータを使用してCORSをバイパスできます。 WebpackのDevServer 。

const GMAPS_PLACES_AUTOCOMPLETE_URL = (
  process.env.NODE_ENV === 'production'
    ? 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
    : 'place-api' // on development, we'll use the Webpack's dev server to redirect the request

const urlParams = new URLSearchParams([
  ...
])

const response = await fetch(
  `${GMAPS_PLACES_AUTOCOMPLETE_URL}?${urlParams}`,
  { method: 'GET' }
)

そして、あなたのwebpack.config.js...

module.exports = {
  devServer: {
    proxy: {
      '/place-api': {
        target: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
        changeOrigin: true,
        pathRewrite: { '^/place-api': '' }
      }
    }
  }
}
0
Macabeus