前端内网访问高德地图解决方案

高德地图的服务是需要外网支持的，没有外网是访问不了高德的服务的。当我们只有内网时，该怎么访问外网服务呢。 这边我实际遇到的情况是客户端内网是能够访问项目的服务器，项目部署的服务器是可以访问外网的。 仔细分析一下,我们只要将不能访问的外网地址先替换成可以访问的服务器地址，再通过服务器向外网的高德服务转发就可以实现内网访问高德地图

前端做的工作：打开F12查看调了哪些高德的服务。
高德地图主要是通过引入js文件然后再在js文件中调用服务 所以我们需要先要将外网的js文件地址替换成服务器地址 假如你的服务部署在http://192.168.0.29:21111 上

const hookSrcipt =()=> {
  const mapsUrl = 'https://webapi.amap.com/maps'
  const webapiHttpsUrl = 'https://webapi.amap.com'
  const restApiUrl = 'https://restapi.amap.com'
  const property = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src')
  const nativeSet = property.set
  function customiseSrcSet(url) {
    if (url.toString().search(mapsUrl) !== -1) {
      url = 'http://192.168.0.29:21111/' +url.split(mapsUrl)[1]
    } else if (url.toString().search(webapiHttpsUrl) !== -1) {
      url = 'http://192.168.0.29:21111/webAmap' + url.split(webapiHttpsUrl)[1]
    } else if (url.toString().search(restApiUrl) !== -1) {
      url = 'http://192.168.0.29:21111/restAmap' + url.split(restApiUrl)[1]
    }
    nativeSet.call(this, url)
  }
  Object.defineProperty(HTMLScriptElement.prototype, 'src', {
    set: customiseSrcSet
  })
}
hookSrcipt()

到这里前端的工作就做完了，后面只需要配置nginx代理就行了

nginx代理

#高德地图转发配置
   location /maps {
    proxy_set_header Accept-Encoding ""; # 返回的js文件不经过GZip压缩，方便替换内容
    proxy_pass https://webapi.amap.com/maps;
    sub_filter_types *; # 文件类型 *为所有
    sub_filter_once off; # 是否只替换一次 默认on 这里改为off
    sub_filter 'webapi.amap.com' '192.168.0.29:21111/webAmap'; # sub_filter '原来内容' '替换内容'
    sub_filter 'http://webapi.amap.com' 'http://192.168.0.29:21111/webAmap';
    sub_filter 'https://webapi.amap.com' 'http://192.168.0.29:21111/webAmap';
    sub_filter 'https://restapi.amap.com' 'http://192.168.0.29:21111/restAmap';
    # sub_filter 'a.amap.com' 'dev.bonahl.com/amap';
    sub_filter 'vdata.amap.com' '192.168.0.29:21111/vdata';
    sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '192.168.0.29:21111/{vdata,vdata01,vdata02,vdata03,vdata04}';
    sub_filter 'webst0{1,2,3,4}.is.autonavi.com' '192.168.0.29:21111/webst0{1,2,3,4}';
    sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '192.168.0.29:21111/wprd0{1,2,3,4}';
  }

  location /webAmap/ {
    proxy_pass https://webapi.amap.com/;
  }
  location /restAmap/ {
    proxy_pass https://restapi.amap.com/;
  }
  location /amap/ {
    proxy_pass https://a.amap.com/;
  }
  location /vdata/ {
    proxy_pass https://vdata.amap.com/;
  }
  location /vdata01/ {
    proxy_pass https://vdata01.amap.com/;
  }
  location /vdata02/ {
    proxy_pass https://vdata02.amap.com/;
  }
  location /vdata03/ {
    proxy_pass https://vdata03.amap.com/;
  }
  location /vdata04/ {
    proxy_pass https://vdata04.amap.com/;
  }
  location /webst01/ {
    proxy_pass https://webst01.is.autonavi.com/;
  }
  location /webst02/ {
    proxy_pass https://webst02.is.autonavi.com/;
  }
  location /webst03/ {
    proxy_pass https://webst03.is.autonavi.com/;
  }
  location /webst04/ {
    proxy_pass https://webst04.is.autonavi.com/;
  }
  location /wprd01/ {
    proxy_pass https://wprd01.is.autonavi.com/;
  }
  location /wprd02/ {
    proxy_pass https://wprd02.is.autonavi.com/;
  }
  location /wprd03/ {
    proxy_pass https://wprd03.is.autonavi.com/;
  }
  location /wprd04/ {
    proxy_pass https://wprd04.is.autonavi.com/;
  }
  location /vector/ {
    proxy_pass http://vector.amap.com/;
  }
  location /lbs/ {
   proxy_pass  https://lbs.amap.com/;
  }
  
  需要注意的是，maps中地址由于有好多是没有带具体协议的，所以替换的地址有一些是https协议，所以这里还要给服务配置ssl证书，不然https协议的地址是没办反转发拦截的

还有一个偏方就是拿maps那个地址直接将js文件下载下来，在js中直接将需要替换的地址替换成你的服务器地址。

将上述的hookSrcipt方法中的 url = 'http://192.168.0.29:21111/' +url.split(mapsUrl)[1]替换成本地js文件 url = 'http://192.168.0.29:21111/maps.js'

此时nginx配置只需要这些就行

 location /webAmap/ {
   proxy_pass https://webapi.amap.com/;
 }
 location /restAmap/ {
   proxy_pass https://restapi.amap.com/;
 }
 location /amap/ {
   proxy_pass https://a.amap.com/;
 }
 location /vdata/ {
   proxy_pass https://vdata.amap.com/;
 }
 location /vdata01/ {
   proxy_pass https://vdata01.amap.com/;
 }
 location /vdata02/ {
   proxy_pass https://vdata02.amap.com/;
 }
 location /vdata03/ {
   proxy_pass https://vdata03.amap.com/;
 }
 location /vdata04/ {
   proxy_pass https://vdata04.amap.com/;
 }
 location /webst01/ {
   proxy_pass https://webst01.is.autonavi.com/;
 }
 location /webst02/ {
   proxy_pass https://webst02.is.autonavi.com/;
 }
 location /webst03/ {
   proxy_pass https://webst03.is.autonavi.com/;
 }
 location /webst04/ {
   proxy_pass https://webst04.is.autonavi.com/;
 }
 location /wprd01/ {
   proxy_pass https://wprd01.is.autonavi.com/;
 }
 location /wprd02/ {
   proxy_pass https://wprd02.is.autonavi.com/;
 }
 location /wprd03/ {
   proxy_pass https://wprd03.is.autonavi.com/;
 }
 location /wprd04/ {
   proxy_pass https://wprd04.is.autonavi.com/;
 }
 location /vector/ {
   proxy_pass http://vector.amap.com/;
 }
 location /lbs/ {
  proxy_pass  https://lbs.amap.com/;
 }

这样我们就完成了对外网请求的拦截替换及代理工作，就能实现内网访问高德地图服务