CORS标头“ Access-Control-Allow-Origin”丢失-已提供Access-Control-Allow-Origin

时间:2018-09-01 04:31:21

标签: reactjs cors axios

我已经给出了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,但仍然遇到相同的错误。

预先感谢

1 个答案:

答案 0 :(得分:1)

据我所知,您必须使用Google Maps的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提出请求的唯一受支持的方式运行浏览器的前端JavaScript代码中的Google Maps API。

     

Google故意不允许通过其他此类库中通过axios或AJAX方法发送的请求(也不能直接通过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 APIGoogle Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource