Google Maps API: リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません
<p>多くの人がこの質問をしているのを見ましたが、どの答えも私にとっては役に立ちませんでした。 </p>
<p>React/Axios を使用して Google Maps API を呼び出そうとしています。 </p>
<p>これは私の取得リクエストです:</p>
<pre class="brush:php;toolbar:false;">componentDidMount() {
axios({
メソッド: 'get'、
URL: `http://maps.googleapis.com/maps/api/js?key=${key}/`、
ヘッダー: {
「アクセス制御許可オリジン」: '*'
"アクセス制御の許可メソッド": 'GET',
}、
})
.then(関数 (応答) {
console.log(応答);
})
.catch(関数 (エラー) {
コンソール.ログ(エラー);
});
}</pre>
<p>これはエラー メッセージです: </p>
<pre class="brush:php;toolbar:false;">XMLHttpRequest は http://maps.googleapis.com/maps/api/js を読み込めませんか?
key=xxxxxxxxx/. プリフライト要求への応答がアクセス制御チェックに失敗しました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、「http://localhost:3000」からのアクセスは拒否されます。 </pre>
<p>他の人が指摘した CORS に関する記事を読みました
https://www.html5rocks.com/en/tutorials/cors/</p>
<p>しかし、そこでは問題に対する答えが見つかりません。 </p>
