topic Re: ArcGIS JS API v 4.x Cors in ArcGIS JavaScript Maps SDK Questions

ArcGIS JS API v 4.x Cors

AbdelrahmanAbdelrazek — Fri, 14 Feb 2020 13:45:57 GMT

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.

Re: ArcGIS JS API v 4.x Cors

Rhys-Donoghue — Sun, 05 Apr 2020 08:17:22 GMT

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

Re: ArcGIS JS API v 4.x Cors

AbdelrahmanAbdelrazek — Mon, 06 Apr 2020 12:07:08 GMT

Thanks Rhys for your response, I did try that.

But unfortunately still getting the same error.

Re: ArcGIS JS API v 4.x Cors

AbdelrahmanAbdelrazek — Mon, 04 May 2020 23:08:14 GMT

This acatually worked for me when I switched to 4.15

Thanks Rhys Donoghue‌

Re: ArcGIS JS API v 4.x Cors

Rhys-Donoghue — Tue, 05 May 2020 03:07:15 GMT

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.

Re: ArcGIS JS API v 4.x Cors

NilsBabel1 — Thu, 05 Nov 2020 15:14:25 GMT

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?

Re: ArcGIS JS API v 4.x Cors

Shingo-Ikeda — Mon, 18 Sep 2023 13:50:56 GMT

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