Google Maps API: The requested resource is missing the 'Access-Control-Allow-Origin' header
P粉993712159
2023-08-23 00:23:21
<p>I saw a lot of people asking this question, but none of the answers worked for me. </p>
<p>I'm trying to call the Google Maps API using React/Axios. </p>
<p>This is my get request:</p>
<pre class="brush:php;toolbar:false;">componentDidMount() {
axios({
method: 'get',
url: `http://maps.googleapis.com/maps/api/js?key=${key}/`,
headers: {
"Access-Control-Allow-Origin": '*'
"Access-Control-Allow-Methods": 'GET',
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}</pre>
<p>This is the error message: </p>
<pre class="brush:php;toolbar:false;">XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js?
key=xxxxxxxxx/. Response to preflight request failed access control check: There is no 'Access-Control-Allow-Origin' header on the requested resource. Therefore, access from 'http://localhost:3000' is denied. </pre>
<p>I read the article about CORS that others pointed to
https://www.html5rocks.com/en/tutorials/cors/</p>
<p>But I can't find the answer to my problem there. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://maps.googleapis.com/maps/apiFetch requests from web applications in front-end JavaScript are not supported, the way your code is trying to use it.Instead, you must use the supported Google Maps JavaScript API, whose client code is different from what you are trying to do. An example of a distance matrix service is as follows:
Here is an example of using the Place Autocomplete API Using the Places library :
Using the Maps JavaScript API like this - by loading the library using the
Google intentionally does not allow access to the Google Maps API by sending requests via other libraries such as axios or AJAX methods or directly using the XHR or Fetch API.