Esri/esri-leaflet

tiledMapLayer useCors setting

vangenechtenbert opened this issue · 6 comments

Hi,

The useCors in the L.esri.tiledMapLayer layer doen't seem to work.

I expect to see the Sec-Fetch-Mode: cors in the Request Headers.
Instead i see the Sec-Fetch-Mode: no-cors.

I used an example of the esri https://esri.github.io/esri-leaflet/examples/tile-layer-2.html in the codePen to show the problem:

Example

image

Would appreciate any insight :)

Thank you for the question.

In your example, the map layer is loading fine for me - is it not loading ok for you?
image

Hi, it's not the mapview that's not working.
I'm talking about the useCors option.

/**
             * Dictates if the service should use CORS when making GET requests.
             */
            useCors?: boolean | undefined;

I'm in a situation where i need to force the use of CORS for a tiledMapLayer.
This seems to work for featureLayers though.

Thankss

In the sample you sent (https://codepen.io/bvg/pen/VwWPrXg?editors=1000), the layer is using CORS. You can verify that it is working because the code in this page (codepen.io) is loading the resource from a separate domain (services.arcgisonline.com) successfully. If it was not working, you would not see the layer show up in the app - it would just be blank screen. (you would also see an error in the developer console saying "cannot access cross domain resource" or something like that)

Can you please provide an updated sample showing the tiledMapLayer not working due to a CORS error?

To demonstrate my issue with the useCors setting, i've edited the codePen.
I load 2 feature layers :
1 with useCors:true -> sampleserver6
image

1 with useCors:false - > sampleserver5
image

If i do the same with TitledMapLayer :
useCors: true . The setting is no-cors!?
i expect this to be different.
image

This behaviour is causing issues in my project.
Just the setting is not acting as expected.
Do you see my problem?

Thank you for the clarification @vangenechtenbert.

I am doing some research on this header:

And discovered that sec-fetch-mode header is not modifyable from JavaScript:

image

https://developer.mozilla.org/en-US/docs/Glossary/Fetch_metadata_request_header

So I think the browser is setting that header because the tiled service is loading the image directly, where the FeatureLayer is loading the info via an XHR Request. I do not think that the Esri Leaflet code can control that.

To help you solve your problem, can you please post a Codepen example showing the usage of L.esri.tiledMapLayer where the layer is failing to load? That way we can help you figure out what is the cause (the sec-fetch-mode header or something else) of the problem.

Thanks @gavinr

Still not sure what the useCors setting is for though.

We solved our problem by setting a cache busting option.
This way we force our leaflet plugin to recheck the cors.

Thanks for helping