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

Question

多くの人がこの質問をしているのを見ましたが、どの答えも私にとっては役に立ちませんでした。

React/Axios を使用して Google Maps API を呼び出そうとしています。

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

componentDidMount() {
  axios({
   メソッド: 'get'、
   URL: `http://maps.googleapis.com/maps/api/js?key=${key}/`、
   ヘッダー: {
     「アクセス制御許可オリジン」: '*'
     "アクセス制御の許可メソッド": 'GET',
   }、
  })
 .then(関数 (応答) {
  console.log(応答);
 })
 .catch(関数 (エラー) {
  コンソール.ログ(エラー);
 });
}

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

XMLHttpRequest は http://maps.googleapis.com/maps/api/js を読み込めませんか?
key=xxxxxxxxx/. プリフライト要求への応答がアクセス制御チェックに失敗しました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、「http://localhost:3000」からのアクセスは拒否されます。 

他の人が指摘した CORS に関する記事を読みました https://www.html5rocks.com/en/tutorials/cors/

しかし、そこでは問題に対する答えが見つかりません。

Answer 1

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

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

リーリー

Place Autocomplete API の使用例を次に示します。 Places ライブラリの使用 :

リーリー

このように Maps JavaScript API を使用すると、

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