I am working on a ReactJS project where I am implementing a map from maplibre-gl-js. I have connected my app to AWS Location service using Amplify and can receive the Vector tiles from AWS. I cam trying to add the search bar control using createAmplifyGeocoder().

When trying to search for something, I am getting a CORS error in the concole:

Access to fetch at 'https://places.geo.us-west-2.amazonaws.com/places/v0/indexes/{my_indexes_name_here}/search/suggestions' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My current Implementation in an async initializeMap(params) is this.

let map = await createMap({
    container: containerId,
    center: longlat,
    zoom: zoom,
    minZoom: 3, //set to 3 to fix blank map on too far zoom out. also fixes
});

map.addControl(createAmplifyGeocoder({showResultsWhileTyping: true}), "bottom-left");

My Amplify.configure in my index.tsx contains the following.

Amplify.configure({
    ...
    geo: {
        AmazonLocationService: {
            ...
            search_indices: {
                items: ["my_index_name"],
                default: "my_index_name",
            },
            region: "us-west-2",
        },
    },
})

I have a backend, but as far as I can tell, this call is going straight to AWS, and not hitting our backend. With that said, my dev backend has CORS enabled for all (trying to eliminate issues as I debug.)