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

这篇具有很好参考价值的文章主要介绍了内网走nginx代理访问高德webapi2.0。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:客户的电脑都只能访问内,服务器可以访问外网,客户电脑使用的项目中用到了高德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';
        }

最终配置如下:

  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 ^~/style_icon/ {
            proxy_pass  http://vdata.amap.com/style_icon/;
        }
        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 /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 ^~/webapi/ui/{
           proxy_pass https://webapi.amap.com/ui/;
        }

        location /maps {
            set $proxyip "$XD_DBO_CTRL_WEB";
            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/webrd0{1,2,3,4}';
            sub_filter 'https' 'http';
            sub_filter '暂未获得高德开放平台商用授权' '';
        }

        location /loca {
            set $proxyip "$XD_DBO_CTRL_WEB";
            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';
        }
        location /mapsold {
            set $proxyip "$XD_DBO_CTRL_WEB";
            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 'webrd0{1,2,3,4}.is.autonavi.com' '$proxyip/webrd0{1,2,3,4}';
            sub_filter 'webst0{1,2,3,4}.is.autonavi.com' '$proxyip/webst0{1,2,3,4}';
            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';
            sub_filter '暂未获得高德开放平台商用授权' '';
        }

        location ^~/ui/ {
            set $proxyip "$XD_DBO_CTRL_WEB";
            proxy_set_header Accept-Encoding "";
            proxy_pass   https://webapi.amap.com/ui/;
            sub_filter_types *;
            sub_filter_once off;
            sub_filter 'webapi.amap.com/count' '$proxyip/webapi/count';   
            sub_filter 'webapi.amap.com' '$proxyip/webapi';
            sub_filter 'https' 'http';
        }

1.4的版本有两个图片文件如法替换,需要js替换,代码如下:

let proxyip='${systemConfig.offlineMapUrl}';
/*
*全局拦截Image的图片代理高德
 *
 */
function hookImg() {
  const property = Object.getOwnPropertyDescriptor(Image.prototype, 'src')
  const nativeSet = property.set
  function customiseSrcSet(url) {
    // 1.4.15版本的地图,这两个图片找不到来源,只能在这里捕获代理
    if (url.toString().search('http://vdata.amap.com/style_icon/icon-normal-small.png') !== -1) {
      url =proxyip+ '/style_icon/icon-normal-small.png'
    } else if (url.toString().search('http://vdata.amap.com/style_icon/icon-biz-small.png') !== -1) {
      url = proxyip+ '/style_icon/icon-biz-small.png'
    } else if (url.toString().search('https://vdata.amap.com/style_icon/icon-normal-small.png') !== -1) {
      url = proxyip+ '/style_icon/icon-normal-small.png'
    } else if (url.toString().search('https://vdata.amap.com/style_icon/icon-biz-small.png') !== -1) {
      url = proxyip+ '/style_icon/icon-biz-small.png'
    }
    nativeSet.call(this, url)
  }
    Object.defineProperty(Image.prototype, 'src', {
    set: customiseSrcSet
  })
}

完!文章来源地址https://www.toymoban.com/news/detail-746273.html

到了这里,关于内网走nginx代理访问高德webapi2.0的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx 内网互相访问

    nginx   下载地址 http://nginx.p2hp.com/en/download.html conf/nginx.conf    配置  server {         listen       8090;         server_name  172.xx.xx.xx; //自己内网地址         #charset koi8-r;         #access_log  logs/host.access.log  main;         location / {             #root   html;             #inde

    2023年04月15日
    浏览(98)
  • 红队隧道应用篇之Burpsuite设置上游代理访问内网(五)

    Burp Suite设置上游代理的主要原因是为了拦截和修改来自浏览器的请求。当您在使用Burp Suite进行Web应用程序安全测试时,您可能希望模拟攻击者发送恶意请求,以测试应用程序是否能够防御这些攻击。使用上游代理可以帮助您在浏览器和目标服务器之间插入Burp Suite,从而使您

    2024年02月04日
    浏览(58)
  • Nginx外网访问内网如何实现

            项目要求:将甲方内网的项目能够对外访问,甲方提供一个中间过渡服务器,中间过渡服务器与外网互通,且中间服务器可以访问内网;         外网客户端-中间过渡服务器开放端口:80         中间过渡服务器-内网服务器开放端口:80、9095         系统架构:

    2024年02月07日
    浏览(39)
  • 利用Apache实现正向代理,使内网服务器可以访问外网

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 正向代理和反向代理的定义可以自己查询资料,通常用的较多的场景使用Nginx作为反向代理服务器,Nginx做正向代理服务器时仅可以访问HTTP网站,不能访问HTTPS网站,用处不大。 本文所需要的准备,一台

    2024年01月20日
    浏览(54)
  • Linux内网服务器通过代理访问外网服务器

    目录 一、环境介绍 二、安装squid 三、配置代理 扩展一、JAVA应用通过代理访问外网 扩展二、通过nginx代理实现yum跳转 扩展三、代理harbor镜像方式访问 192.168.7.131可以通外网 192.168.7.129不通外网 需要通过代理的方式实现192.168.7.129可以访问外网  1、在192.168.7.131主机(可以访问外

    2024年02月08日
    浏览(51)
  • 具有公网IP的服务器作为代理服务器,并使用Nginx将内网服务器反向代理

    在代理服务器上安装Nginx。如果您正在使用Linux操作系统,则可以使用包管理器来安装Nginx。例如,如果您使用的是Ubuntu,可以使用以下命令安装: 配置Nginx以将HTTP和HTTPS请求转发到内部服务器。打开Nginx的主配置文件/etc/nginx/nginx.conf,并在http块中添加以下代码: 注意: 将

    2024年01月25日
    浏览(48)
  • nginx 代理sftp,达到访问nginx服务器就间接访问sftp服务器

    测试环境部署规划: 192.168.0.101 nginx 服务器    192.168.0.102 sftp 服务器  192.168.0.103  作为客户端去访问,这里三台机器选用centos 7.9系统,客户端可以使用window,软件访问sftp服务! 首先 1.在192.168.0.101机器上部署nginx  步骤: #安装依赖 yum install gcc pcre-devel openssl-devel  wget -y 

    2024年02月16日
    浏览(65)
  • Nginx代理Grafana,鉴权访问以及Grafan免登录访问

    在使用 grafana 做页面嵌入的场景中,通常需要 grafana 与前端在同域下,方便鉴权、解决跨域。 Nginx 代理 Grafana 后,就不能使用 Grafana 中默认配置的端口和路径进行访问,必须通过 Nginx 访问 Grafana 。 如果需要做 Iframe 嵌入自研系统时,存在鉴权问题,在同域名下可以使用 IFr

    2024年02月17日
    浏览(31)
  • Xshell+Xftp通过代理的方式访问局域网内网服务器

    最近在部署项目时遇到只有1台服务器拥有公网ip,其它服务器只有局域网ip,当然其它服务器可以正常访问网络,例如如下模型。之前访问其它几台服务器,都是先通过登录公网IP服务器,然后在Xshell里面执行ssh远程连接,这种方式不够直观而且上传文件到其它服务器很繁琐,

    2024年02月03日
    浏览(55)
  • Nginx反向代理,让网页可以被别人访问

    1、下载Nginx   想要使用Nginx反向代理首先进入Nginx官网 2、在右侧选择download 3、选择自己操作系统的稳定版本 4、解压压缩包 5、进入html文件夹  把想要代理的网页替换文件夹中的index.html 6、回到nginx解压的主目录打开nginx.exe  如果没有出现小黑框也没事。 7、打开浏览器,

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包