来源“在 Access-Control-Allow-Origin 响应 header 中未找到 cross-origin 图像资源的来源“”

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

我在 mvc 项目中使用开放层地图,
使用 cdn:

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

虽然我需要获取位置,但我有功能

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();
    }

地图在浏览器中运行良好chrome
如图所示:

但在 IE、Edge 和 safari 中地图显示为附件


在失败的浏览器(Edge 和 safari)中检查控制台时
我有错误:

[CORS]来源'My web site '没找到'My web site ' 在 Access-Control-Allow-Origin 对 cross-origin 图片资源的 header 响应中 'http://b.tile.openstreetmap.org/16/38663/27093.p'

我尝试了很多发送请求的解决方案:

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

任何帮助。 !

OSM 启用了 CORS,但如果应用程序 运行 在 https 站点上,大多数浏览器将拒绝来自 http url 的 CORS。 OpenLayers 2 默认为 OSM 的 http 地址,因此请尝试使用 https 地址指定它

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"]
)