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://XXX.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.