多くの人がこの質問をしているのを見ましたが、どの答えも私にとっては役に立ちませんでした。
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/
しかし、そこでは問題に対する答えが見つかりません。
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 へのアクセスを意図的に許可していません。