我已经给出了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
,但仍然得到同样的错误。
提前致谢
据我所知,你必须使用谷歌地图的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。*方法)是唯一受支持的向Google Maps API发出请求的方式来自frontend运行浏览器的JavaScript代码。
Google故意不允许通过其他此类库中的axios或AJAX方法发送的请求访问Google Maps API,也不允许直接使用XHR或Fetch API访问Google Maps API。
您可以在这里找到更多信息:https://developers.google.com/maps/documentation/javascript/places#place_search_requests
此外,还有一些重复的问题:CORS and Angular $http GET to Google Places API和Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource