No 'Access-Control-Allow-Origin' header is present on the requested resource

[zainkhan10]

I'm using this library for maps in my react application, and I'm adding search address functionality in my application and facing CORS error.

const handleApiLoaded = (map, maps) => {
    console.log('map, maps: ', map, maps);
    // use map and maps objects
    if (map && maps) {
        setApiReady(true);
        setMap(map);
        setMapApi(maps);
    }
};

{apiReady && <SearchBox map={map} mapApi={mapApi} addplace={addPlace} />}
<GoogleMapReact
    defaultZoom={4}
    bootstrapURLKeys={{
        key: 'API_KEY',
        region: 'US',
    }}
    defaultCenter={[41.25480000139866, -85.85206222945915]}
    yesIWantToUseGoogleMapApiInternals
    onGoogleApiLoaded={({ map, maps }) =>
        handleApiLoaded(map, maps)
    }
></GoogleMapReact>

I'm following this document to add search functionality

[AadarshGhodasara]

I'm facing the same issue. Can you please give the solution to this?

IMG 1--->

IMG 2--->

Thank You.

[zainkhan10]

@AadarshGhodasara that will cause these errors on localhost, but when your app is deployed over https, everything should be working.

[wink15]

i have the same issue trying to implement oauth2 from google. .from origin 'http://localhost:8101' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.