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:
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.
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?
@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
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.
> 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.