How to catch CORS Error on picture Symbol

477
1
Jump to solution
07-17-2019 04:31 PM
NickStapler
New Contributor II

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 'xxx.png' from origin 'http://localhost:xxxx 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?

0 Kudos
1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

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

View solution in original post

1 Reply
Noah-Sager
Esri Regular Contributor

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