内网通过代理服务器访问高德地图服务的方法

背景

随着各类物联网项目建设推进，物联网设备的日益普及以及由此产生的数据，为了开启强大的信息监测能力，我们越来越多的依赖地理信息系统（GIS）。
虽然当前在公网环境可以方便的获取到免费GIS服务（如百度地图、腾讯地图、高德地图等），但有些项目因为处于专网环境，客户不允许电脑访问公网，导致必须要在专网环境花费较多成本自建GIS服务。
对于预算有限的项目，我们是否有简单的方法实现专网客户使用公网免费GIS服务呢？下面一步步分析，通过可以访问公网的代理服务器来实现专网电脑访问高德GIS服务。

分析过程

1. 我们将高德地图demo部署到我们nginx服务中，浏览器端打开此页面即能访问到高德地图。
2. 浏览器访问高德地图demo，按F12，发现首先会通过此接口获取js api文件，src=“https://webapi.amap.com/maps?v=1.4.15&key=您申请的key”。（key申请方法）
3. 专网浏览器端为了获取js api文件，可以通过代理服务器来访问。在nginx代理服务器中增加如下配置即可。

        location /maps {
                proxy_pass https://webapi.amap.com/maps;
            }

4. 修改高德地图demo html文件，将"src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key"修改为“src="http://代理服务器ip/maps?v=1.4.15&key=您申请的key”。【代理服务器默认使用80端口】
5. 浏览器再次访问高德地图demo，按F12，发现js api文件已经能通过代理服务器访问到，追踪之后访问链接，发现地图服务会自调用如下这些地址对应的接口restapi.amap.com、webapi.amap.com、vdata.amap.com、wprd0{1-4}.is.autonavi.com、webrd0{1-4}.is.autonavi.com。
6. 为了使获取js api文件之后的访问都经过代理服务器，我们需要代理服务器返回js api文件时修改相应地址为代理服务器地址。为了实现此目的，nginx代理服务器需要添加http_sub_module模块，重新编译nginx以生成新的bin文件，编译配置–prefix=/usr/local/nginx --add-module=…/nginx-rtmp-module-1.2.1 --with-http_ssl_module --with-http_stub_status_module --with-pcre=…/pcre-8.43 --with-openssl=…/openssl-1.1.1d --with-zlib=…/zlib-1.2.11 --with-http_flv_module --with-http_mp4_module --with-stream --with-stream_ssl_module --with-stream_ssl_preread_module --with-http_realip_module --with-http_sub_module。nginx编译配置参考
7. nginx代理配置增加如下内容用于替换地址为代理服务器地址：

        location /maps {
            proxy_set_header Accept-Encoding "";
            proxy_pass https://webapi.amap.com/maps;
            sub_filter_types *;
            sub_filter_once off;
            sub_filter 'http://webapi.amap.com' 'http://代理服务器ip/webapi';
            #第5部分列出的地址都要做替换，此处只给出一个例子
        }

     说明如下：

        proxy_set_header Accept-Encoding "";#返回的js api文件不压缩，以便替换其中内容；
        sub_filter_types *;#所有文件类型
        sub_filter_once off;#所有匹配到的都替换
        sub_filter 'http://webapi.amap.com' 'http://代理服务器ip/webapi';#中间为被替换内容（即js文件中原始地址），后面为替换后内容（即内网代理服务器地址）

8. 断开电脑公网访问权限，浏览器再次访问高德地图demo，按F12，发现已经能够正常展示地图。但还有两个图标集文件无法访问，分别为http://vdata.amap.com/style_icon/icon-normal-small.png和
   http://vdata.amap.com/style_icon/icon-biz-small.png，暂时没找到访问这两个图标集的源头，通过修改本机hosts文件采用代理方式来访问（hosts文件增加配置：代理服务器ip vdata.amap.com），nginx增加如下代理配置：

        location /style_icon/ {
            proxy_pass   http://vdata.amap.com/style_icon/;
        }

9. 断开电脑公网访问权限，浏览器再次访问高德地图demo，按F12，发现高德GIS地图服务已经完全能够正常访问。

nginx代理完整配置

    server {
        listen       80;
        server_name  localhost;
        #add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        location / {
                root html;
                index  index.html index.htm;
        }
        location /restapi/ {
                proxy_pass https://restapi.amap.com/;
        }
        location /webapi/ {
                proxy_pass https://webapi.amap.com/;
        }
        location /vdata/ {
                proxy_pass https://vdata.amap.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 /webrd01/ {
            proxy_pass   https://webrd01.is.autonavi.com/;
        }
        location /webrd02/ {
            proxy_pass   https://webrd02.is.autonavi.com/;
        }
        location /webrd03/ {
            proxy_pass   https://webrd03.is.autonavi.com/;
        }
        location /webrd04/ {
            proxy_pass   https://webrd04.is.autonavi.com/;
        }
        location /style_icon/ {
            proxy_pass   http://vdata.amap.com/style_icon/;
        }
        #代理获取js api文件并修改文件内容
        location /maps {
            proxy_set_header Accept-Encoding "";
            proxy_pass https://webapi.amap.com/maps;
            sub_filter_types *;
            sub_filter_once off;
            sub_filter 'http://webapi.amap.com' 'http://代理服务器ip/webapi';
            sub_filter 'https://webapi.amap.com' 'http://代理服务器ip/webapi';
            sub_filter 'http://restapi.amap.com' 'http://代理服务器ip/restapi';
            sub_filter 'http://vdata.amap.com' 'http://代理服务器ip/vdata';
            sub_filter 'vdata.amap.com' '代理服务器ip/vdata';
            sub_filter 'webapi.amap.com/count' '代理服务器ip/webapi/count';
            sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '代理服务器ip/wprd0{1,2,3,4}';
            sub_filter 'webapi.amap.com/theme' '代理服务器ip/webapi/theme';
            sub_filter 'restapi.amap.com/v4' '代理服务器ip/restapi/v4';
            sub_filter 'webapi.amap.com/style' '代理服务器ip/webapi/style';
        }
    }

结束