web-dev-qa-db-ja.com

Google Maps API：リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

この質問が複数の人から聞かれるのを見ましたが、どれもうまくいきませんでした。

私はreact/axiosでgoogle maps apiへのAPI呼び出しを行おうとしています。

これは私の取得リクエストです：

componentDidMount() {
  axios({
   method : 'get',
   url : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   headers: {
     "Access-Control-Allow-Origin": '*'
     "Access-Control-Allow-Methods": 'GET',
   },
  })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

これはエラーメッセージです。

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js?
key=xxxxxxxxx/. Response to preflight request doesn't pass access control 
check: No 'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

私は他の誰もが指す記事con CORSを読みました https://www.html5rocks.com/en/tutorials/cors/

しかし、私はそこに私の問題の答えを見つけることができません。

google-mapsgoogle-maps-api-3corsxmlhttprequestaxios
8
jaimefps

https://maps.googleapis.com/maps/apiは、コードが使用しようとしている方法で、Webアプリで実行されているフロントエンドJavaScriptからのリクエストの取得をサポートしていません。

代わりに、サポートされている Google Maps JavaScript API を使用する必要があります。クライアント側のコードは、試行しているものとは異なります。 距離行列サービスのサンプル は次のようになります。

<script>
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [Origin1, Origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
},…
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

そして、Place Autocomplete APIの使用例を以下に示します Placesライブラリを使用 ：

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].Push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

そのようなMaps JavaScript APIを使用する— script要素を介してライブラリをロードし、次にgoogle.maps.Mapおよびその他google.maps.*メソッド-ブラウザを実行しているフロントエンドJavaScriptコードからGoogle Maps APIへのリクエストを行うためにサポートされている唯一の方法です。

Googleでは、意図的に、axiosまたはAJAXメソッドで他のライブラリのメソッドで送信されたリクエストを介して、または直接XHRまたはFetch APIを使用して、Google Maps APIへのアクセスを許可していません。

16
sideshowbarker