CORS標頭“ Access-Control-Allow-Origin”丟失-已提供Access-Control-Allow-Origin

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

據我所知，您必須使用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 Maps API發出請求的唯一受支持的方法來自運行瀏覽器的前端JavaScript代碼。

Google故意不允許通過其他此類庫中的使用axios或AJAX方法發送的請求，也不能直接使用XHR或Fetch API發送訪問Google Maps API的權限。

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

此外，已經存在重復的問題： CORS和Angular $ http GET to Google Places API和Google Maps API：所請求的資源上沒有“ Access-Control-Allow-Origin”標頭