GetStyleDescriptorCommand: Access to fetch at 'https://maps.geo.{region}.amazonaws.com/v2/styles/Satellite/descriptor?key={MyKey}' from origin has been blocked by CORS policy

[zeeshanmakeen]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

I am getting the following error:
Access to fetch at 'https://maps.geo.{Region}.amazonaws.com/v2/styles/Satellite/descriptor?key={API-KEY-Removed}' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

for the following code:

import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
import {
	ColorScheme,
	GeoMapsClient,
	GeoMapsClientConfig,
	GetStyleDescriptorCommand,
	GetStyleDescriptorCommandInput,
	MapStyle
} from "@aws-sdk/client-geo-maps";

try {
  const authHelper = await withAPIKey("API-Key-Here");
  const config = authHelper.getClientConfig();
  const client = new GeoMapsClient({ ...config, region: "Region-Here" });
  const styleInput = {
    Style: "Satellite" as MapStyle
  };
  const command = new GetStyleDescriptorCommand(styleInput);
  const response = await client?.send(command);
  if (!response) {
    throw new Error("Failed to fetch style descriptor: response is undefined.");
  }
  return response;
} catch (error) {
  throw new Error(`Failed to fetch style descriptor: ${error}`);
}

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/package-name@version, ...

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

v22.18.0

Reproduction Steps

Run this code in react app: 
try {
  const authHelper = await withAPIKey("API-Key-Here");
  const config = authHelper.getClientConfig();
  const client = new GeoMapsClient({ ...config, region: "Region-Here" });
  const styleInput = {
    Style: "Satellite" as MapStyle
  };
  const command = new GetStyleDescriptorCommand(styleInput);
  const response = await client?.send(command);
  if (!response) {
    throw new Error("Failed to fetch style descriptor: response is undefined.");
  }
  return response;
} catch (error) {
  throw new Error(`Failed to fetch style descriptor: ${error}`);
}

Observed Behavior

Access to fetch at 'https://maps.geo.{Region}.amazonaws.com/v2/styles/Satellite/descriptor?key={API-KEY-Removed}' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Expected Behavior

Should get Style descriptor in response in this line: const response = await client?.send(command);

Possible Solution

No response

Additional Information/Context

No response

[aBurmeseDev]

Hi @zeeshanmakeen - thanks for stopping by.

I wasn't able to reproduce this using our https://github.com/aws-samples/aws-sdk-js-tests repo. Just to confirm you're running this in React?

[zeeshanmakeen]

Hi @aBurmeseDev, Yes, I am running this in a React app. I am getting CORS error. I am able to call other map APIs, such as getStaticMapCommand and GetTileCommand. The issue seem to be in the response headers. I've talked to Amazon location team they were able to reproduce it and informed me they will provide the fix soon.

[aBurmeseDev]

Appreciate the update, it sounds like service team need to add the header on their end. I'll check in with them internally.