How to catch CORS Error on picture Symbol

Question

I am creating graphics and adding them to a graphics layer- this is a simplified version of what i'm doing. symbol = { type: "picture-marker", url: item.attributes.iconUrl, width: sizeL[0] + "px", height: sizeL[1] + "px" } var gO = { geometry: item.geometry, attributes: item.attributes, symbol: symbol } var g = new Graphic(gO); layer = new GraphicsLayer(); layer.graphics = [gO]; map.add(layer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ No error occur until after the layer is added to the map and i get cors error for the picture url: Access to image at 'xyz.png' from origin 'http://localhost:xyz has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Then the markers are still rendered, they just are black dots: How can i intercept the error so that I can either suppress it in the console or delete the graphics layer and reconstruct it with a working image?

Noah Sager · Accepted Answer

To intercept, try using the esriConfig.request.interceptors

https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#RequestInterceptor

Couple ideas to try for CORS issues:

1) esriConfig.request.trustedServers

https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#request

Indicates whether cross origin requests made to the associated server should include credentials such as cookies and authorization headers.

2) CORS guide page

https://developers.arcgis.com/javascript/latest/guide/cors/index.html

3) Try using a proxy

https://developers.arcgis.com/javascript/latest/guide/proxies/#example%3A-server-is-not-enabled-for-cors