Nginx代理高德地图的前端明文的Js api简易搭建以及无法获取图片、ui的坑（无密钥版）

前情提要：由于F12调试，高德、百度地图api密钥/key都明文展示在Source里面，很容易被盗取，不安全，如下：

解决方法:使用Nginx代理转发//webapi.amap.com/maps?v=1.4.15&key=XX,让F12只显示自己被ng代理的地址，保证不泄露

①：下载Nginx并配置nginx.conf 文件

ngnix下载在这！
nginx.conf如下：

http {
	server {
        listen       80;
        server_name  127.0.0.1;
        ......
		//本机80端口下的 /map/_AMapService 将被代理到 proxy_pass 后面的地址
		//高德地图
		location /map/_AMapService {
			proxy_pass https://webapi.amap.com/maps?v=1.4.15&key=58f9eXXXXXX89c&plugin=AMap.MarkerClusterer;
			proxy_set_header Host webapi.amap.com;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
			proxy_set_header X-Forwarded-Proto $scheme;
		}
		//百度地图
		location /map/_BMapService {
			proxy_pass https://api.map.baidu.com/getscript?v=2.0&ak=wIt2mXXXXLY&s=1;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
		}

②前端script配置

	// map/_AMapService对应到nginx里面的proxy_pass 
     <script src="http://127.0.0.1:80/map/_AMapService"></script>
     <script src="http://127.0.0.1:80/map/_BMapService"></script>

以上就是比较建议的替换到ngnix中的方法

可能遇到的坑：

①：http://webapi.vs.amap.com/theme/v1.3/XX.png 找不到

解决方法：

  //引入样式，切记不要 async 不要async 不要async
<script  src="//webapi.amap.com/ui/1.1/main.js"></script>