ArcGIS JS API v 4.x Cors

[AbdelrahmanAbdelrazek]

Hello everyone, 

We have a cached map service, whenever I try to add it to the map using ArcGIS JS API v 3.x "ArcGISTiledMapServiceLayer" it works fine.  

But whenever I try to add it to the map, using ArcGIS JS API v 4.x "TileLayer" I get this error 

"Access to fetch at 'Service URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Could anyone please assist me with that.

Thanks in advance.

Kind regards,

Abdelrahman.

[Rhys-Donoghue · Accepted solution]

hi Abdelrahman,

You may need to add a trusted server, e.g. 

config | ArcGIS API for JavaScript 4.14 

require(["esri/config"], function(esriConfig) { esriConfig.request.trustedServers.push("[<protocol>//]<hostname>.<domain>[:<port>]"); });

Regards,

Rhys

[AbdelrahmanAbdelrazek]

Thanks Rhys for your response, I did try that.

But unfortunately still getting the same error.

[AbdelrahmanAbdelrazek]

This acatually worked for me when I switched to 4.15

Thanks Rhys Donoghue‌

[Rhys-Donoghue]

Hmm, should have worked for 4.14 but wouldn't surprise me if there was a bug.  4.15 fixed a few bugs I was having with my app.

[NilsBabel1]

Hello, I'm getting the same CORS error.  I've added the trusted server with no effect.  Can you provide an example of the format?  Do you have to provide the port? I'm using 4.16.  I used to use esriConfig.defaults.io.corsEnabledServers.push on the 3.x api and it seemed like it actually worked.  But trustedServers.push doesn't seem to ever work.  Does it do the same thing?

[Shingo-Ikeda]

Hi Rhys,

I am also trying to pass api-key in header using esriConfig.request.interceptors as well as esriConfig.request.trustedServers, however, it doesn't return the geojson results as I am able to extract through postman.  Any crue what is causing CORS error through this request method? 

    esriConfig.request.trustedServers.push(this.base_url);
    esriConfig.request.interceptors.push({
      urls: geojson_url,
      before: function (params: any) {
        params.requestOptions.headers = {
          'x-api-key': this.x_api_key,
          'Access-Control-Allow-Origin': this.base_url,
        };
      },    
      after: function(response) {
        if (!response.ssl) {
          response.ssl = true;
        }
        const geojsonLayer = new GeoJSONLayer({
          title: 'Forecast Kind',
          url: response.data, 
          popupTemplate: template_forecast_kind,
          visible: false,
          outFields:["*"] 
        });
      },
      headers: {
        'x-api-key': this.x_api_key,
        'Access-Control-Allow-Origin': '*',
      },
    });
    

The error shows:

Access to fetch at 'https://.....com/sites/current_forecast_status' from origin 'http://localhost:4200' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Thanks,

Shingo