[GIS] Why doesn’t Leaflet have cross-origin error when adding WMS layer from GeoServer, but GetFeatureInfo using ajax does

ajaxgeoservergetfeatureinfoleafletwms

I am learning web mapping with Leaflet. I added a WMS layer and now I'm trying to get feature details using ajax to send getFeatureInfo request. I'm not finished yet, and right now I just want to log something to the console to test whether the request is successful. My code look like this:

$.ajax({url:url, success: function(){console.log('ab')}

where the url is a working WMS getFeatureInfo request that I've tested. The developer tool gaves me this error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/geog585/wms?service=WMS&vers…ation/json&x=271&y=280&query_layers=geog585:TaipeiSchoolUTF8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I've seen some similar post on this issue. It seems that I can resolve the problem by changing some settings in GeoServer. But what really puzzles me is why I didn't get this error when adding the layer to Leaflet? According to the MDN Same-origin policy page:

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

Both getFeatureInfo and getMap request are retrieving information from GeoServer. So why does one work while the other doesn't?

Best Answer

Because that is the way CORS works! loading images is always (mostly) a safe operation so the browser doesn't care where you get them from. Loading a script (javascript or xml) is potentially dangerous and so to protect you from nice-safe-site.com loading code from very-dangerous-hacker-site.com while you aren't watching CORS prevents this.

So WMS (and WMTS) getMap requests are usually image requests and so don't worry the browser but getFeatureInfo is asking for a text based response so the browser wants you to be sure you know what is going on.

Related Question