Google Maps API: リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません
P粉993712159
P粉993712159 2023-08-23 00:23:21
0
1
369

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

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/

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

P粉993712159
P粉993712159

全員に返信 (1)
P粉384244473

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 へのアクセスを意図的に許可していません。

いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!