CORS header ‘Access-Control-Allow-Origin’ missing - Access-Control-Allow-Origin already given

Question

i have already given the header for axios call but i am still getting this error. i have tried a lot. the code is given below: -

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>

    );
  }
}

i have given * instead of https://maps.googleapis.com but still getting the same error.

Thanks in advance

Answer 1

As far as I know, you have to use Google Maps' Place API, not Axios.

Example:

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);

As @sideshowbarker said:

Using the Maps JavaScript API like that—by way of a script element to load the library, and then using the google.maps.Map and other google.maps.* methods—is the only supported way to make requests to the Google Maps API from frontend JavaScript code running a browser.

Google intentionally doesn't allow access to the Google Maps API by way of requests sent with axios or AJAX methods in other such libraries, nor directly with XHR or the Fetch API.

You could find more information here: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Also, there are already duplicate questions: CORS and Angular $http GET to Google Places API and Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource