topic Re: Issues with CORS in ArcGIS JavaScript Maps SDK Questions

Issues with CORS

NicolasSwijngedouw — Thu, 06 Oct 2022 09:59:16 GMT

Hi all,

I'm currently implementing a solution for a client using the ArcGIS Javascript API. The solution requires some security which requires API keys and custom headers. When I'm adding the API key in the request URL I'm not having any CORS issues, whenever I'm adding the API key in the header I'm getting CORS issues. Even when I add "Access-Control-Allow-Origin": '*' in my header I'm getting issues. Here is my code:

ngOnInit(): void {

config.request.interceptors?.push({

urls: "xxx",

headers: {

"Accept" :'/',

"Access-Control-Allow-Origin": '*',

"API-KEY" : "foo"

before: function(request) {

request.url = (<string>request.url).replace(AppConfig.settings.baseURL.url, AppConfig.settings.proxyURL.url)

console.log(request);

after: function(response) {

console.log(response);

}

})

}

This is the error:

Header has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

When I only add "Accept": '/' in my header I have no issues for example.

Can someone help me out?

Kind regards,

Nicolas

Re: Issues with CORS

LukeCalladine — Thu, 06 Oct 2022 14:18:43 GMT

I'm certainly no expert in CORS and bumble my way through most issues.

If I recall correctly the Access-Control-Allow-Origin header needs to be on the server side, rather than in the client request? Assuming you've shared client-side code?

Re: Issues with CORS

AndyGup — Thu, 06 Oct 2022 14:27:12 GMT

@NicolasSwijngedouwIf you inject unauthorized headers it will cause a CORS pre-flight error.

Here are a few resources to check out on the coding patterns for using API keys: https://developers.arcgis.com/javascript/latest/secure-resources/#api-keys, https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/ and https://developers.arcgis.com/javascript/latest/display-a-map/#get-an-api-key

Re: Issues with CORS

NicolasSwijngedouw — Thu, 06 Oct 2022 14:39:55 GMT

Hi @AndyGup, thank you for your reply.

Is there any way to authorize custom headers on the server-side?

The API Key that I'm trying to include in my request header is not an ESRI Api Key, but an API Key for an Azure API Management component. That component is a reverse proxy on the edge of the network containing the ArcGIS Servers.

In a near future, headers such as Authorization and Username are required as well and I will have to pass them via the header of the request.

Re: Issues with CORS

AndyGup — Thu, 06 Oct 2022 19:14:14 GMT

> is not an ESRI Api Key, but an API Key for an Azure API Management component

Gotcha. You'll need to contact Azure technical support since that's their product. We don't have any control or knowledge of their security practices.