azure-sdk-for-js icon indicating copy to clipboard operation
azure-sdk-for-js copied to clipboard

Request-ID missing from CORS preflight Response

Open akopplinufpi opened this issue 1 year ago • 16 comments

  • Azure App configuration - @azure/app-configuration:
  • ^1.6.0:
  • Windows:
  • [ ] nodejs
    • 20.10.0:
  • [ ] chrome
    • Version 117.0.5938.132 (Official Build) (64-bit):

Describe the bug calls to AppconfigurationClient.getConfigurationSetting() are resulting in CORS error: Access to fetch at 'https://{mysubdomain}.azconfig.io.ky/.appconfig.featureflag{myfeatureflag}?api-version=2023-10-01' from origin {myorigin} has been blocked by CORS policy: Request header field request-id is not allowed by Access-Control-Allow-Headers in preflight response.

To Reproduce Steps to reproduce the behavior:

  1. we have the following React JS code

const useFeatureFlag = (flagKey = "") => { const [enabled, setEnabled] = useState(false);

useMemo(async () => {
	if (!flagKey || !flagKey.toString().trim().length) {
		console.error("A feature flag key must be supplied.");
	} else {
		try {
			const result = await client.getConfigurationSetting({
				key: `.appconfig.featureflag/${flagKey.toString().trim()}`
			});
			if (result && typeof result === "object") {
				console.debug(
					"Feature: " + JSON.parse(result.value).id,
					JSON.parse(result.value).enabled
				);
				setEnabled(JSON.parse(result.value).enabled);
			}
		} catch (error) {
			console.error(error);
		}
	}
}, [flagKey]);

return { enabled };

};

it is making the call to retrieve our feature flag setting in App Configuration. However, the call is getting blocked by CORS with the above reason.

Expected behavior The call should return as normal.

Screenshots 1 2 3

Additional context The call worked fine from localhost, but failed to work after the code was deployed to the server. We modified all of the possible cors settings on our own server, making them as permissible as possible, and that did not solve the problem. we also looked up and down for a CORS or other setting that would allow us to fix this issue on the App Config website, however we did not find anything that we could toggle or modify.

I am not a CORS expert, so please forgive me if this is something that needs to be resolved on my end. But after talking to a few other developers I am confident that the issue lies on microsoft's end. It seems to me that somehow microsoft needs to allow "request-id" as the header in their CORS section on their server. Alternatively, is it possible that microsoft intends to use x-ms-request-id, or some other variation? it seems to me that x-ms-request-id is currently allowed under the CORS settings.

akopplinufpi avatar May 16 '24 18:05 akopplinufpi