Google Maps API: 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
<p>많은 사람들이 이 질문을 하는 것을 보았지만 어떤 답변도 제게 도움이 되지 않았습니다. </p>
<p>React/Axios를 사용하여 Google Maps API를 호출하려고 합니다. </p>
<p>내 요청은 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">comComponentDidMount() {
축({
메소드: '가져오기',
url : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
헤더: {
"액세스 제어-허용-원본": '*'
"액세스 제어 허용 방법": 'GET',
},
})
.then(함수(응답) {
console.log(응답);
})
.catch(함수 (오류) {
console.log(오류);
});
}</pre>
<p>오류 메시지는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">XMLHttpRequest가 http://maps.googleapis.com/maps/api/js를 로드할 수 없습니까?
키=xxxxxxxxx/. 실행 전 요청에 대한 응답이 액세스 제어 확인에 실패했습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 따라서 'http://localhost:3000'에서의 접근은 거부됩니다. </pre>
<p>다른 사람들이 지적한 CORS에 관한 기사를 읽었습니다.
https://www.html5rocks.com/en/tutorials/cors/</p>
<p>하지만 거기서는 내 문제에 대한 답을 찾을 수 없습니다. </p>
