当前位置：前端开发 >  内网走nginx代理访问高德webapi2.0

内网走nginx代理访问高德webapi2.0

邹琼俊 2024-07-05 16:33:01 阅读 54

需求：客户的电脑都只能访问内，服务器可以访问外网，客户电脑使用的项目中用到了高德webapi2.0。

10.200.31.45:32100是我们的web服务器。

网上基本上都是对高德webapi1.4的配置方式，而web2.0有一些差别。

1.前端修改高德地图的js应用

如果是index.html引入，

修改之前的应用：

<script type="text/javascript" crossorigin

src="https://webapi.amap.com/maps?v=2.0&key=高德key&plugin=AMap.ToolBar, AMap.ControlBar,AMap.MoveAnimation,AMap.RangingTool,AMap.Geocoder"></script>

<script src="https://webapi.amap.com/loca?v=2.0.0&key=高德key"></script>

修改之后的配置：

<script type="text/javascript" crossorigin

src="<%= BASE_URL %>maps?v=2.0&key=高德key&plugin=AMap.ToolBar, AMap.ControlBar,AMap.MoveAnimation,AMap.RangingTool,AMap.Geocoder"></script>

<script src="<%= BASE_URL %>loca?v=2.0.0&key=高德key"></script>

如果是js动态加载，代码如下：

/**

* 创建高德秘钥

* @param secret

*/

export function createSecret(secret?:string){

secret=secret||'高德秘钥';

// 拼装脚本字符串

const script = document.createElement('script');

// 高德 Web API 初始化配置

script.innerHTML = `

window._AMapSecurityConfig = {

securityJsCode: '${secret}',

};`;

// 将脚本插入到页面头部

document.head.appendChild(script);

}

//获取地图地址

const getMapUrl=()=>{

const {map_offline}=Local.getAmapConfig();

let mapUrl='https://webapi.amap.com';

if(map_offline){

mapUrl='';

}

if (process.env.NODE_ENV === "development"){

mapUrl='https://webapi.amap.com';

}

return mapUrl;

}

/**

* 创建高德script引入脚本

* @param key

* @param url

*/

export function loadAMapScript(url:string,key?:string) {

key=key||'高德key';

const mapUrl=getMapUrl();

const src =`${mapUrl}/maps?v=2.0&key=${key}${url}`;

console.log('我的src',src);

return new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = src;

script.async = true;

script.onerror = reject;

script.onload = resolve;

document.head.appendChild(script);

});

}

/**

* 创建高德local script引入脚本

* @param key

* @param url

*/

export function loadAMapLocaScript(key?:string,url?:string=''){

key=key||'高德key';

const mapUrl=getMapUrl();

const src =`${mapUrl}/loca?v=2.0&key=${key}${url}`;

return new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = src;

script.async = true;

script.onerror = reject;

script.onload = resolve;

document.head.appendChild(script);

});

}

然后在main.ts中：

import {DefaultAmapConfig} from "@/xd-common-web/xdConst";

import {loadAMapLocaScript,loadAMapScript,createSecret} from "@/xd-common-web/utils/map/amapLink";

try{

console.log('开始加载地图');

const mapConfig=Local.getAmapConfig()||DefaultAmapConfig;

createSecret(mapConfig.map_secret);

await loadAMapScript("&&plugin=AMap.LineSearch,AMap.StationSearch,AMap.PolylineEditor,AMap.Geocoder,AMap.PlaceSearch,AMap.AutoComplete,Amap.ElasticMarker,AMap.PolygonEditor",mapConfig.map_key);

await loadAMapLocaScript(mapConfig.map_key);

console.log('地图加载成功');

} catch{

console.log('地图加载异常');

}

2.nginx配置如下：

location /restapi/ {

proxy_pass https://restapi.amap.com/;

}

location /restapi/v3/ {

proxy_pass https://restapi.amap.com/v3/;

}

location /webapi/ {

proxy_pass https://webapi.amap.com/;

}

location /webapi/count{

proxy_pass https://webapi.amap.com/count;

}

location /vdata/ {

proxy_pass https://vdata.amap.com/;

}

location /vdata/style_icon/ {

proxy_pass http://vdata.amap.com/style_icon/;

}

location /vdata/style/{

proxy_pass https://vdata.amap.com/style/;

}

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 /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/;

}

#代理获取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://10.200.31.45:32100/webapi';

sub_filter 'https://webapi.amap.com' 'http://10.200.31.45:32100/webapi';

sub_filter 'http://restapi.amap.com' 'http://10.200.31.45:32100/restapi';

sub_filter 'https://restapi.amap.com' 'http://10.200.31.45:32100/restapi';

sub_filter 'http://vdata.amap.com' 'http://10.200.31.45:32100/vdata';

sub_filter 'https://vdata.amap.com' 'http://10.200.31.45:32100/vdata';

sub_filter 'webapi.amap.com' '10.200.31.45:32100/webapi';

sub_filter 'vdata.amap.com' '10.200.31.45:32100/vdata';

sub_filter 'restapi.amap.com' '10.200.31.45:32100/restapi';

sub_filter 'vdata0{1,2,3,4}.amap.com' '10.200.31.45:32100/vdata0{1,2,3,4}';

sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '10.200.31.45:32100/{vdata,vdata01,vdata02,vdata03,vdata04}';

sub_filter 'webapi.amap.com/count' '10.200.31.45:32100/webapi/count';

sub_filter 'webapi.amap.com/theme' '10.200.31.45:32100/webapi/theme';

sub_filter 'restapi.amap.com/v3' '10.200.31.45:32100/restapi/v3';

sub_filter 'webapi.amap.com/style' '10.200.31.45:32100/webapi/style';

sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '10.200.31.45:32100/wprd0{1,2,3,4}';

sub_filter 'webrd0{1,2,3,4}.is.autonavi.com' '10.200.31.45:32100/wprd0{1,2,3,4}';

sub_filter 'https' 'http';

}

location /loca {

proxy_set_header Accept-Encoding "";

proxy_pass https://webapi.amap.com/loca;

sub_filter_types *;

sub_filter_once off;

sub_filter 'webapi.amap.com/count' '10.200.31.45:32100/webapi/count';

sub_filter 'https' 'http';

}

至此，就配置好了。注意：实际项目中nginx配置文件中的10.200.31.45:32100可使用变量代替。优化后的完整版配置如下：

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 ^~/webapi/theme{

proxy_pass https://webapi.amap.com/theme;

}

location /vdata/ {

proxy_pass https://vdata.amap.com/;

}

location ^~/vdata/style_icon/ {

proxy_pass http://vdata.amap.com/style_icon/;

}

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 /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/;

}

#代理获取js api文件并修改文件内容

location /maps {

set $proxyip "10.200.31.45:32100";

proxy_set_header Accept-Encoding "";

proxy_pass https://webapi.amap.com/maps;

sub_filter_types *;

sub_filter_once off;

sub_filter 'webapi.amap.com' '$proxyip/webapi';

sub_filter 'vdata.amap.com' '$proxyip/vdata';

sub_filter 'restapi.amap.com' '$proxyip/restapi';

sub_filter 'vdata0{1,2,3,4}.amap.com' '$proxyip/vdata0{1,2,3,4}';

sub_filter '{vdata,vdata01,vdata02,vdata03,vdata04}.amap.com' '$proxyip/{vdata,vdata01,vdata02,vdata03,vdata04}';

sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '$proxyip/wprd0{1,2,3,4}';

sub_filter 'webrd0{1,2,3,4}.is.autonavi.com' '$proxyip/wprd0{1,2,3,4}';

sub_filter 'https' 'http';

}

location /loca {

set $proxyip "10.200.31.45:32100";

proxy_set_header Accept-Encoding "";

proxy_pass https://webapi.amap.com/loca;

sub_filter_types *;

sub_filter_once off;

sub_filter 'webapi.amap.com/count' '$proxyip/webapi/count';

sub_filter 'https' 'http';

}

实现思路：通过特定的前缀maps和loca把高德webapi的引用进行转发，转发之后，高德加载地图时，自动会调用一些接口，使用sub_filter 对返回的内容进行替换，替换为服务器的地址+特定前缀，再根据前缀二次转发即可。

如果要兼容1.4.15的api，需要添加如下配置：

location /mapsold {

set $proxyip "10.200.31.45:32100";

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://$proxyip/webapi';

sub_filter 'https://webapi.amap.com' 'http://$proxyip/webapi';

sub_filter 'http://restapi.amap.com' 'http://$proxyip/restapi';

sub_filter 'http://vdata.amap.com' 'http://$proxyip/vdata';

sub_filter 'vdata.amap.com' '$proxyip/vdata';

sub_filter 'vdata0{1,2,3,4}.amap.com' '$proxyip/vdata0{1,2,3,4}';

sub_filter 'webapi.amap.com/count' '$proxyip/webapi/count';

sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '$proxyip/wprd0{1,2,3,4}';

sub_filter 'webapi.amap.com/theme' '$proxyip/webapi/theme';

sub_filter 'restapi.amap.com/v4' '$proxyip/restapi/v4';

sub_filter 'restapi.amap.com/v3' '$proxyip/restapi/v3';

sub_filter 'webapi.amap.com/style' '$proxyip/webapi/style';

}

完！

上一篇： 信息打点web篇----企业宏观资产打点

下一篇： 用前端写一个网页（新手必看）

本文标签

内网走nginx代理访问高德webapi2.0   

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。

相关文章

阅读排行

热门文章