ArcGIS api for javaScript 4.9 + Vue 跨域问题的分析及解决方法

         在加载切片地图的时候,浏览器报跨域问题,然后配置了arcgis 的代理服务器。点击查看下载esri代理服务器部署文件及说明。关于代理服务器的部署文档里讲的很详细,网上也有很多博客,可以参考,值的注意的是1.0版本支持ArcGIS  server 10.0,1.1.0 及之后的版本支持ArcGIS server 10.1 及以后的版本,目前最新版本为1.1.2。配置完代理服务之后,网上找到的资料大多都是添加如下两句,即可解决代理跨域的问题。

ArcGIS api for javaScript 4.9 + Vue 跨域问题的分析及解决方法_第1张图片

 esriConfig.request.proxyUrl = 'http://192.168.3.17:8082/Java/proxy.jsp';
 esriConfig.request.useProxy = true;

        如果你用的不是Vue cli 搭建的纯前端框架,也许到这个地方你的问题已经可以解决了。然而我的遇到的问题仍然存在,而且基本找不到更有用的资料。ArcGIS  api for JavaScript 4.9之前的版本与4.9写法不一致,刚开始怀疑自己写错了,但是并没有。

       翻了几遍esri 的官方文档得知ArcGIS sever 10.1 之前的版本不支持跨域,上面两句代码会默认执行,但是在ArcGIS server 10.1及之后的版本默认是支持跨域请求的, 这样就导致了上面两句代码加了之后服务加载的过程中并不会走代理,浏览器端完全没反应。注意关键字,即使配置了代理服务器,ArcGIS api 请求服务时代理也不会一定执行,如果遇到ArcGIS server 支持跨域请求或者浏览器支持跨域请求,则默认不走代理服务器。

      找到问题就好解决了,通过以下方式配置代理规则可以强制ArcGIS api 请求走代理服务器。

  urlUtils.addProxyRule({
      urlPrefix: "http://60.191.110.204:6080",
      proxyUrl: "http://192.168.3.17:8082/Java/proxy.jsp"
  });

ArcGIS api for javaScript 4.9 + Vue 跨域问题的分析及解决方法_第2张图片

       到目前为止在加载切片服务时已经走代理了,但是跨域问题仍然存在。因为基于Vue cli 的Web程序是前后端完全分离的纯前端工程,使用的是nginx部署的,而代理服务器是部署在tomcat中的,这两个web应用之间也存在跨域问题,之间把Vue cli Web程序部署到Tomcat中,问题即可以解决了。当然怎么把Vue cli 工程部署到Tomcat中也需要几个简单的操作,比如把路由build下的assetsPublicPath: '/',修改为assetsPublicPath: './',一些静态文件的引用路径也需要更改。详细的资料请另行查找。

      关于ArcGIS api 的代理请求的两个总结。

1、ArcGIS api 代理请求如果不配置具体的代理规则,遇到支持跨域请求的服务器或者浏览器则不走代理服务器。

2、代理服务器需要和Web服务器保持一致,否则代理服务与Web服务之间仍然会存在跨域问题。

 

你可能感兴趣的:(ArcGIS api for javaScript 4.9 + Vue 跨域问题的分析及解决方法)