Angular集成OpenLayers加载OSM图层出现跨域问题如何解决

• 修正crossOrigin配置
  OpenStreetMap官方瓦片服务原生支持跨域请求，将crossOrigin设置为null会导致请求携带Origin: null头，触发服务端拦截规则返回HTML格式的错误页面，进而触发CORB拦截。
  你只需要将配置改为crossOrigin: 'anonymous'即可，同时注意修正你代码中生命周期钩子的拼写错误，Angular的初始化钩子为ngOnInit而非gOnInit，正确代码如下：

ngOnInit(): void {
    this.map = new Map({
        view: new View({
            center: [0, 0],
            zoom: 1,
        }),
        layers: [
            new TileLayer({
                source: new OSM({
                    crossOrigin: 'anonymous'
                }),
            })
        ],
        target: 'ol-map'
    });
}

• 配置反向代理兜底
  如果调整配置后仍存在跨域问题，可以在部署应用的服务端配置反向代理，将瓦片请求转发到OpenStreetMap服务，从源头上消除跨域问题。以Nginx部署为例，新增如下配置：

location /osm-tiles/ {
    proxy_pass https://a.tile.openstreetmap.org/;
    proxy_set_header Host a.tile.openstreetmap.org;
    proxy_set_header Referer https://www.openstreetmap.org/;
}

同步修改OpenLayers的瓦片源配置，走代理路径请求瓦片：

source: new XYZ({
    url: '/osm-tiles/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous'
})

• 额外排查
  检查部署服务是否存在请求过滤、防盗链、请求头改写等逻辑，避免发往OSM的请求被篡改触发服务端拦截。

内容的提问来源于stack exchange，提问作者dorcsi