CORS Issue with Amplify Geo Search via createAmplifyGeocoder(): "Access to fetch at 'https://places.geo.us-east-1.amazonaws.com/places/v0/indexes/mySearchIndex/search/suggestions' from origin 'https://XXXXXXX.replit.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

[BrianHHough]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Geo

Amplify Version

v6

Amplify Categories

geo

Backend

Amplify Gen 2

Environment information

# Put output below this line
  System:
    OS: Linux 6.2 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 AMD EPYC 7B13
    Memory: 20.52 GB / 62.81 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.18.1 - /nix/store/rrz8cqhldyl17bbs60g7d8vbaadkxc40-nodejs-20.18.1-wrapped/bin/node
    Yarn: 1.22.22 - /nix/store/jcgdksj946l5l42c2y9ks2l4g6n74h3f-yarn-1.22.22/bin/yarn
    npm: 10.8.2 - /nix/store/rrz8cqhldyl17bbs60g7d8vbaadkxc40-nodejs-20.18.1-wrapped/bin/npm
    pnpm: 9.15.0 - /nix/store/z8s3r4vwf4r26g2d7shnw5lva6ihim8f-pnpm-9.15.0/bin/pnpm
    bun: 1.1.40 - /nix/store/2l0rhsa5pjdg5j0id60f0w5lw6r9g4rp-bun-1.1.40/bin/bun

Describe the bug

When attempting to use the Amplify Geo service with createAmplifyGeocoder() to add a search input to a MapLibre map in an Amplify Gen2 project, the search request is blocked by CORS policy. The request to AWS Location Places API returns the error:

Access to fetch at 'https://places.geo.us-east-1.amazonaws.com/places/v0/indexes/mySearchIndex/search/suggestions' from origin 'https://XXXXXXXX.kirk.replit.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Despite configuring Amplify with the appropriate search index and map resources, the CORS issue persists, indicating the request might be bypassing the backend and calling AWS directly.

I can successfully perform searches using Geo.searchByText and Geo.searchByCoordinates directly, but integrating createAmplifyGeocoder() results in a CORS issue.

Expected behavior

The search input should send requests to AWS Location Places through Amplify Geo, returning search results without CORS issues.

More specifically, the createAmplifyGeocoder() should work in the same way that I can call this successfully: Geo.searchByCoordinates or Geo.searchByText. Those return results correctly. But the createAmplifyGeocoder() results in CORS errors.

Reproduction steps

1. Create an Amplify Gen2 app using AWS Amplify.

2. Set up Amplify Geo with a map and search index by following the Amplify documentation for adding AWS Geo services.

3. Add a map to the app using createMap() and attach the geocoder control using:

map.addControl(createAmplifyGeocoder({ showResultsWhileTyping: true }), 'top-left');

4. Attempt to search using the map geocoder input.

5. Observe the CORS error in the console.

Code Snippet

import React, { useEffect, useRef, useState } from "react";
import {
	createMap,
	createAmplifyGeocoder,
	AmplifyGeocoderAPI,
} from "maplibre-gl-js-amplify";
import { Map, Marker, Popup } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { Geo } from "@aws-amplify/geo";
import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
import "maplibre-gl-js-amplify/dist/public/amplify-geocoder.css";

export default function MapPicker({ center = [0, 20], zoom = 1 }) {
	const mapRef = useRef(null);
	const mapInstance = useRef(null);

	useEffect(() => {
		if (!mapInstance.current && mapRef.current) {
			(async () => {
				try {
					const map = await createMap({
						container: mapRef.current,
						center,
						zoom,
					});
					map.addControl(
						createAmplifyGeocoder({ showResultsWhileTyping: true }),
						"top-left",
					);
					mapInstance.current = map;
				} catch (error) {
					console.error("Error initializing map:", error);
				}
			})();
		}
	}, []);

	return <div ref={mapRef} className="w-full h-96" />;
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[AllanZhengYP]

Hi @BrianHHough

Sorry I could not reproduce this issue from a reproduction on my localhost. I notice you are using Replit, can you try if you can reproduce it as well on your localhost? Just to eliminate the possibility the Replit origin triggers certain CORS policies on Location service side.

[BrianHHough]

Hi @AllanZhengYP - thanks for replying! Would you be able to share your corresponding backend.ts file + the way you're initializing the createMap functionality?

Even if I can run this on localhost, I will be deploying my app to a URL so I'd still need to figure out the CORS issue eventually. Replit redirects localhost to a dev url, and i'm able to use Cognito, AppSync, etc. resources from AWS successfully. The only issue is that my location search index queries are getting blocked via CORS.

[AllanZhengYP]

Hi @BrianHHough I simply used the code snippet here: https://docs.amplify.aws/react/build-a-backend/add-aws-services/geo/configure-location-search/ and was able to search for location without issue. Can you try it as well?

[BrianHHough]

Hi @AllanZhengYP - I am using the Next.js framework with TypeScript, not react: https://docs.amplify.aws/nextjs/build-a-backend/add-aws-services/geo/configure-location-search/

Also, any ideas how I can get rid of the CORS issues please? Those are still impacting my build and ability to use that Amplify construction. Whatever the request Amplify is sending to the AWS Location Service continues to be blocked from any domain I send it from, yet authenticated users can access the app and maps (my maps are made to only allow authenticated users).

Any help on this would be greatly appreciated - thank you!

[AllanZhengYP]

@BrianHHough Can you compare your IAM policy against the one used in our doc example? We have 8 permission listed in the example: https://docs.amplify.aws/react/build-a-backend/add-aws-services/geo/configure-location-search/#setup-a-new-location-search-index Especially make sure if you have the permission for the suggestions

geo:SearchPlaceIndexForSuggestions