在博客Hello World文章中提起过,以前在sinaapp中建立过wordpress博客,也写过一篇关于ArcGIS JavaScript API的文章,但是由于sinaapp开始收费以后,我的个人网站就没法访问了。今天在百度中发现尽然能搜索到此文章,而且,使用百度快照还能看见文章的内容,真是十分激动啊,于是决定趁此把文章转移到这个新博客来,呵呵。
文章内容主要是关于ArcGIS js Api v3.0版本报: XMLHttpRequest cannot loadhttp://server/arcgis/rest/info?f=json. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin 的错误。
在esri中国社区中有同学提到:关于arcgis_js_api 3.0的问题,高手指教,在arcgis js api3.0中,在添加图层的时候浏览器开发者工具中会输出这个错误:XMLHttpRequest cannot load http://server/arcgis/rest/info?f=json. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin,虽然对整个程序运行没有影响,但是不太美观。而且这个错误2.x的版本是没有出现的。
看见这个错误可能有点经验的同学已经大致明白是个跨域问题了。对比了一下2.8和3.0 的源码(jsapi.js文件),发现在3.0版本的esri.request方法中多了这么一段代码:esri._detectCors(req.url)(当然还有其他的代码,只是这句是解决这个问题的关键)。还有在esri.config.defaults.io中多了这两个属性:corsDetection: true, _processedCorsServers: {},还有一个属性corsEnabledServers: [],这个属性可能平时关注的同学不多,但是其实这个属性在2.5的版本中就有了,主要作用是用来存放cross-origin resource sharing enabled server 的url地址,详见Cross Origin Resource Sharing (CORS) with the ArcGIS API for JavaScript。
那什么是Cross Origin Resource Sharing (CORS)呢,这个在arcgis js api中又在哪用到了呢?关于CORS,大家可以google一下,英文不好,翻译的不标准怕对你产生误导作用。我的理解是,cors是在HTML5中才有的,实现javascript跨域访问的一个协议吧。当然这一点必须得你使用的浏览器和web服务器都得支持CORS。在arcgis js api中,可能做过编辑功能的同学都知道,在做编辑的时候会使用到代理来解决跨域请求的问题,详见esri.config.defaults.io.corsEnabledServers。现在,在你的web服务器和使用的浏览器都支持CORS的情况下,遇到跨域请求的时候就不用再在你的应用程序中配置代理,只需要在esri.config.defaults.io.corsEnabledServers中添加已经配置过CORS的服务器地址就行。如:esri.config.defaults.io.corsEnabledServers.push(“servicesbeta.esri.com”);但是如果你的浏览器不支持CORS的话,还是得像以前那样设置代理页面。关于这一块可以参考:Cross-Origin Resource Sharing (CORS) – Edit Point Data。
现在对CORS有一点了解了,回到代码中,我们可以看一下esri._detectCors这个函数到底做了些啥(可以打开jsapi.js.unconpressed.js查看没有压缩过的源码)。
01 | esri._detectCors = function (url) { |
09 | var ioConfig = esri.config.defaults.io, |
10 | processed = ioConfig._processedCorsServers; |
11 | if (!ioConfig.corsDetection) { |
15 | var origin = new dojo._Url(url); |
16 | origin = (origin.host + (origin.port ? ( ":" + origin.port) : "" )).toLowerCase(); |
24 | (url && url.toLowerCase().indexOf( "/rest/services" ) !== -1) && |
26 | (!esri._hasSameOrigin(url, window.location.href) && !esri._canDoXOXHR(url)) && |
32 | processed[origin] = -1; |
42 | url: url.substring(0, url.toLowerCase().indexOf( "/rest/" ) + "/rest/" .length) + "info" , |
43 | content: { f: "json" }, |
45 | headers: { "X-Requested-With" : null } |
50 | processed[origin] = 2; |
52 | if (!esri._canDoXOXHR(url)) { |
53 | ioConfig.corsEnabledServers.push(origin); |
62 | processed[origin] = 1; |
69 | processed[origin] = 1; |
75 | console.log( "esri._detectCors: an unknown error occurred while detecting CORS support" ); |
在这个函数中有这样一个请求dojo.xhrGet({…}),看见这一行代码顿时眼前一亮,这一个请求有可能就是这个错误的源, 问题应该就出在使用xhrGet来跨域请求中。那为什么代码会这样去请求呢?
我的理解这几段代码主要的意思就是:首先判断是否有需要测试浏览器和web服务器支持CORS;然后判断浏览器是否支持CORS、是否是ArcGIS REST发布的资源、暂时不清楚服务器是否支持CORS和这个服务器没有测试过这几个条件。如果满足这几个条件,就使用xhrGet去请求http://server/arcgis/rest/info?f=json来测试服务器是否支持CORS,如果支持的话就将服务器地址添加到corsEnabledServers中,并将_processedCorsServers[服务器url]值设为2,在后面的程序中使用,如果不支持的话就设为1,当然也就抛出文章介绍的这个错误。
那如何解决这个问题呢?到此也明白了这个错误的原因和出处以及CORS是什么了吧。我的理解在代码中会发出这样一个请求,应该就是为了测试我们的服务器是否支持CORS,那在我们的程序中,如果我们已经知道用户使用的浏览器不支持CORS(比如说<IE10),或者我们的服务器暂不支持CORS,或者我们铁定要继续使用代理。那我觉得我们是不是就没必要去发送这个请求来测试服务器了吧。那这样的话可以使用下面的方法来避免这个错误:
在加载地图之前,添加如下代码:
1 | esri.config.defaults.io.corsDetection= false ; |
或者
1 | esri.config.defaults.io._processedCorsServers[“你的server url”]=1; |
当然,这只是我的个人见解,结合到你的实际情况可能未必正确。
关于该函数中具体的代码,你感兴趣的话可以再深入研究。这只是我的一些很浅的理解,如果你有更深的认识,欢迎批评指正。《转载自博友》