Issues with CORS

706
4
10-06-2022 02:59 AM
NicolasSwijngedouw
New Contributor II

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

 

0 Kudos
4 Replies
LukeCalladine
New Contributor III

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?

0 Kudos
AndyGup
Esri Regular Contributor
0 Kudos
NicolasSwijngedouw
New Contributor II

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.

0 Kudos
AndyGup
Esri Regular Contributor

> 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.

0 Kudos