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

[AbramhumHsu]

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.

var observerConfig = { childList: true, subtree: true };

// Callback function to handle mutations
function handleMutations(mutations) {
mutations.forEach(function (mutation) {
console.log("call event");
if (mutation.addedNodes.length > 0) {
// Handle added nodes (images)
$(mutation.addedNodes).filter('img').attr("crossorigin", "true");
}
});
}

// Create a new MutationObserver with the callback function
var observer = new MutationObserver(handleMutations);

// Start observing the target node (divmap) and the specified configuration
observer.observe(document.getElementById('divmap'), observerConfig);

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

[Sage_Wall]

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

[AndyGup]

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.

[AbramhumHsu]

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.

[AbramhumHsu]

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.

[ViktorSafar]

`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