內網通過代理服務器訪問高德地圖服務的方法

• 背景
• 分析過程
• nginx代理完整配置
• 結束

背景

隨著各類物聯網項目建設推進，物聯網設備的日益普及以及由此產生的數據，為了開啟強大的信息監測能力，我們越來越多的依賴地理信息系統（GIS）。
雖然當前在公網環境可以方便的獲取到免費GIS服務（如百度地圖、騰訊地圖、高德地圖等），但有些項目因為處于專網環境，客戶不允許電腦訪問公網，導致必須要在專網環境花費較多成本自建GIS服務。
對于預算有限的項目，我們是否有簡單的方法實現專網客戶使用公網免費GIS服務呢？下面一步步分析，通過可以訪問公網的代理服務器來實現專網電腦訪問高德GIS服務。

分析過程

我們將高德地圖demo部署到我們nginx服務中，瀏覽器端打開此頁面即能訪問到高德地圖。

瀏覽器訪問高德地圖demo，按F12，發現首先會通過此接口獲取js api文件，src=“https://webapi.amap.com/maps?v=1.4.15&key=您申請的key”。（key申請方法）

專網瀏覽器端為了獲取js api文件，可以通過代理服務器來訪問。在nginx代理服務器中增加如下配置即可。

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

修改高德地圖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端口】

瀏覽器再次訪問高德地圖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。

為了使獲取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編譯配置參考

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文件中原始地址），后面為替換后內容（即內網代理服務器地址）

斷開電腦公網訪問權限，瀏覽器再次訪問高德地圖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/;}

斷開電腦公網訪問權限，瀏覽器再次訪問高德地圖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';}}

結束

總結

以上是生活随笔為你收集整理的内网通过代理服务器访问高德地图服务的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。