Google Maps API: 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

Question

많은 사람들이 이 질문을 하는 것을 보았지만 어떤 답변도 제게 도움이 되지 않았습니다.

React/Axios를 사용하여 Google Maps API를 호출하려고 합니다.

내 요청은 다음과 같습니다.

comComponentDidMount() {
  축({
   메소드: '가져오기',
   url : `http://maps.googleapis.com/maps/api/js?key=${key}/`,
   헤더: {
     "액세스 제어-허용-원본": '*'
     "액세스 제어 허용 방법": 'GET',
   },
  })
 .then(함수(응답) {
  console.log(응답);
 })
 .catch(함수 (오류) {
  console.log(오류);
 });
}

오류 메시지는 다음과 같습니다.

XMLHttpRequest가 http://maps.googleapis.com/maps/api/js를 로드할 수 없습니까?
키=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의 웹 애플리케이션에서 가져오기 요청은 코드에서 사용하려는 방식으로 지원되지 않습니다.

대신, 지원되는 Google Maps JavaScript API를 사용해야 합니다. 해당 API의 클라이언트 코드는 수행하려는 작업과 다릅니다. 거리 매트릭스 서비스 예시는 다음과 같습니다.

으아악

다음은 장소 자동완성 API를 사용하고 장소 라이브러리를 사용하는 예입니다 :

으아악

이와 같이 Maps JavaScript API를 사용하는 것(

Google은 axios 또는 AJAX 메소드와 같은 다른 라이브러리를 통해 요청을 보내거나 XHR 또는 Fetch API를 직접 사용하여 Google Maps API에 대한 액세스를 의도적으로 허용하지 않습니다.