源 '' 没有在 Access-Control-Allow-Origin 响应标头中找到 '' 处的跨源图像资源

Question

我在 mvc 项目中使用开放层图，
与 CDN：

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

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

获取位置

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] 来源“我的网站”没有找到“我的网站” 在“http://b.tile.openstreetmap.org/16/38663/27093.p”的跨域图像资源的 Access-Control-Allow-Origin 响应标头中

我尝试了许多发送请求的解决方案：

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

任何帮助。 ！

Answer 1

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