topic Re: No 'Access-Control-Allow-Origin' header is present on the requested resource. in ArcGIS JavaScript Maps SDK Questions

No 'Access-Control-Allow-Origin' header is present on the requested resource.

AbramhumHsu — Mon, 25 Dec 2023 03:43:07 GMT

I meet a problem when using ARCGIS JavaScript(version 4.9) to handle map data. My environment is node.js with express.
the following is my code snippet:

esriConfig.request.trustedServers.push("https://XXXX.XXX.XX.118:3070");
......

newBasemap = new TileLayer({
url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
crossOrigin: 'anonymous',
spatialReference: { wkid: 102443 }
});
if (newBasemap != undefined) {
map.add(newBasemap);
}

and this cause an error message .
The Error message show [Access to image ...from origin ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.]

And I found the image element not insert into map object, it is reject when fetching then throw the error. So I use following codes to catch event before image loading data, but it is still invalid.

Does any one know how to solve this problem, any instruction is highly appreciated, thanks a lot.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Sage_Wall — Fri, 22 Dec 2023 14:06:10 GMT

Hi @AbramhumHsu,

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

You need to add the appropriate response header `Access-Control-Allow-Origin' and specify the origin you application is running on, to the web server hosting the service. If your using IIS you can follow these instructions:https://learn.microsoft.com/en-us/iis/extensions/cors-module/cors-module-configuration-reference if not just google enable CORS on Apache or whatever web server is being used.

If you are using ArcGIS Enterprise there are some settings in there as well that may need modification, https://enterprise.arcgis.com/en/server/latest/administer/windows/restricting-cross-domain-requests-to-arcgis-server.htm

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource.

AndyGup — Fri, 22 Dec 2023 22:59:33 GMT

Adding on to Sage's comments, this looks like an issue with Express and not related to the ArcGIS JS SDK. Here's a link to their documentation: https://expressjs.com/en/resources/middleware/cors.html. They specify a number of different CORS options that might fix the issue.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource.

AbramhumHsu — Mon, 25 Dec 2023 05:03:20 GMT

My environment is node.js with express. I have tried cors, but it is invalid. I have re-post the problem with more detailed description.

The main problem is in tileLayer, in some cases, each query of map image should add header"Access-Control-Allow-Origin", like the leaflet.js do, since these server not auto support this, and that cause the cors error. Thanks a lot.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource.

AbramhumHsu — Mon, 25 Dec 2023 05:24:59 GMT

I have use esriConfig.request.trustedServers.push, and it add 'Access-Control-Allow-Origin' header when sending json request to the map server, but when query image to map server after that, it cause cors error, and I found the 'Access-Control-Allow-Origin' header of each image query is empty, even I have add option crossOrigin: 'anonymous'.
And each image ARCGIS query will be combined into a big picture by ARCGIS JAVASCRIPT itself, I found this behavior is not the same as leaflet.js. And that cause the cors error. Do you know anything about this problem, thanks a lot.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ViktorSafar — Tue, 02 Jan 2024 11:19:36 GMT

`Access-Control-Allow-Origin` is a header configured by the server, not by a client. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin