Dealing with CORS When Using PictureMarkerSymbol

[JerryChen]

I'm trying to use an existing png image as customised PictureMarkerSymbol. The image is in the same folder as my .NET project(.sln) is.

When I try the url : "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png", it works like it should. But when I try my locally hosted image, the symbol turns into black dots instead of the image I want to show.

The browser returns the error :

Access to image at 'http://{My IP}:{Port}/cocacola.png' from origin 'http://localhost:49387' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The document offers three approaches to avoid CORS issues :

To me, enabling CORS and proxy is too complicated and time-consuming, so I went for hosting the image on the same domain. My issue is, am I doing it right putting the image in the same folder as the project file? If i am, why does it still seem like a CORS issue?

[Anonymous User]

Hi Jerry,

For your image, in your local IIS web.confg, under configuration element.

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"/>
<add name="Access-Control-Allow-Methods" value="*"/>
<add name="Access-Control-Allow-Origin" value="*"/>
</customHeaders>
</httpProtocol>
</system.webServer>‍‍‍‍‍‍‍‍‍

https://enable-cors.org/server_iis7.html  (sample)

Regarding to CORS,  that article might help you.

https://medium.com/@baphemot/understanding-cors-18ad6b478e2b 

Just think about it, it is required first enable/allow at the server side first before you are trying to configure at the client side.

In your scenario, asp.net shall be server side, arcgis shall  be client side.

So try and configure in asp.net/ local IIS side first.

Below is the list of few way.

Enabling Cross-Origin Requests in ASP.NET Web API 2 | Microsoft Docs 

Enable Cross-Origin Requests (CORS) in ASP.NET Core | Microsoft Docs 

How to troubleshoot

For verification, the best item I will use is Chrome developer network tab or fiddler. (I prefer fiddler for this case).

Check that the response from the server already supply with below headers. 

Normally * value is to allowed everything.

Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods 

But some of the js library at client side does not like *, so you need define complete set as much as you can.

Hope these may help you.

[JerryChen]

It works out right after I locate my image in url:"localhost:{Port}/{Project name}/cocacola.png", so if anyone is looking for a non-CORS/proxy-related solution, try my approach. Thanks for your reply tho.