Search code examples
apiasp.net-mvc-4corsopenlayers

The origin '' did not find '' in the Access-Control-Allow-Origin response header for cross-origin image resource at ''

i use open layer map with mvc project ,
with cdn : 

<script src="https://www.openlayers.org/api/OpenLayers.js"></script>

while i need to get location i have function

getlocation

function getLocation() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {

            if (this.readyState == 4 && this.status == 200) {
                var loc_obj = JSON.parse(this.responseText);
                if (loc_obj) {
                    usersLocationUpdated(loc_obj.latitude, loc_obj.longitude, loc_obj.added_time, loc_obj.located_time);
                } else {
                     if (!mapLayer) {
                            mapLayer = new OpenLayers.Map("myMap");

                        }
                    markers = new OpenLayers.Layer.Markers("Markers");
                    mapLayer.addLayer(markers);
                     
                }
            }
            
        };
        xhttp.open("POST", "../api/tracking/....", false);
        xhttp.send();
    }

the map working well in browser chrome
as appears in image :
Image Success
but in IE,Edge and safari the map appears as image attached
Image Fail


when check console in failing browser (Edge and safari)
i have the error :

[CORS] The origin 'My web site ' did not find 'My web site ' in the Access-Control-Allow-Origin response header for cross-origin image resource at 'http://b.tile.openstreetmap.org/16/38663/27093.p'

i try many solution with send request as :

  xhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
  xhttp.setRequestHeader("Access-Control-Allow-Headers","*");
  xhttp.setRequestHeader('Access-Control-Allow-Credentials', true);

Any help . !
Solution

  • OSM is CORS enabled but most browsers will reject CORS from an http url if the application is running on a https site. OpenLayers 2 defaults to an http address for OSM so try specifying it with an https address

    new OpenLayers.Layer.OSM(
  "OpenStreetMap",
  ["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
   "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
   "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"]
)