缺少 CORS 标头"访问控制允许源" - 已给出访问控制允许源

Question

我已经给出了 axios 调用的标头，但我仍然收到此错误。 我已经尝试了很多。 代码如下： -

class Test extends React.Component {
constructor(props) {
super(props);
this.state = { address: '' };
}
componentDidMount(){
axios({type:'get',url:'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=Chennaiined&radius=1000&keyword=fdtbf&key=KEY'},{header:{'Access-Control-Allow-Origin': 'https://maps.googleapis.com'}})
.then(res=> alert("response"+res))
}
render() {
return (
<div>
<span>test</span>
</div>
);
}
}

我给了*而不是https://maps.googleapis.com但仍然得到同样的错误。

提前致谢

Answer 1

据我所知，你必须使用谷歌地图的Place API，而不是Axios。

例：

var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['photos', 'formatted_address', 'name', 'rating', 
'opening_hours', 'geometry'],
};
service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, callback);

正如@sideshowbarker所说：

像这样使用 Maps JavaScript API——

通过脚本元素加载库，然后使用 google.maps.Map 和其他 google.maps.* 方法——是从运行浏览器的前端 JavaScript 代码向 Google Maps API 发出请求的唯一支持方式。

Google 故意不允许通过其他此类库中的 axios 或 AJAX 方法发送的请求来访问 Google Maps API，也不允许直接使用 XHR 或 Fetch API 访问。

您可以在此处找到更多信息：https://developers.google.com/maps/documentation/javascript/places#place_search_requests

此外，已经有重复的问题：CORS和Angular $http GET to Google Places API 和谷歌地图API：请求的资源上不存在"访问控制允许来源"标头