Nginx代理静态资源(gis瓦片图片)实现非固定ip的url适配网络环境映射ip下的资源请求解决方案

场景

Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)：

Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)-CSDN博客

参考以上瓦片png图片使用nginx代理的过程，设想如下场景

代码中请求的静态资源图片url的ip是固定写死的。

     var osm = L.tileLayer(
        "http://127.0.0.1:19001/{z}/{x}/{y}.png",
        {
          maxZoom: 12,
          minZoom: 9,
          attribution: "公众号:霸道的程序猿",
        }
      );

那么我们的Vue项目在上线部署后，如果当前客户端与图片所在服务器网络不通则无法请求到该照片。

但是如果我们的业务服务器与静态资源服务器是网络互通，那么在业务服务器上使用ngin代理静态资源，则与业务服务器网络

通的电脑均可访问。

又或者有网络环境隔离，业务服务器有映射的两个环境下的ip，如下图所示