Google Maps API: 请求的资源缺少'Access-Control-Allow-Origin”头信息
P粉993712159
2023-08-23 00:23:21
<p>我看到很多人问过这个问题,但是没有一个答案对我有效。</p>
<p>我正在尝试使用react/axios调用google maps api。</p>
<p>这是我的get请求:</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>这是错误信息:</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>
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。