针对ArcGIS Server 跨域问题的解释

在博客Hello World文章中提起过，以前在sinaapp中建立过wordpress博客，也写过一篇关于ArcGIS JavaScript API的文章，但是由于sinaapp开始收费以后，我的个人网站就没法访问了。今天在百度中发现尽然能搜索到此文章，而且，使用百度快照还能看见文章的内容，真是十分激动啊，于是决定趁此把文章转移到这个新博客来，呵呵。

文章内容主要是关于ArcGIS js Api v3.0版本报： XMLHttpRequest cannot loadhttp://server/arcgis/rest/info?f=json. Originhttp://localhost:8080is not allowed by Access-Control-Allow-Origin 的错误。

在esri中国社区中有同学提到:关于arcgis_js_api 3.0的问题，高手指教，在arcgis js api3.0中，在添加图层的时候浏览器开发者工具中会输出这个错误：XMLHttpRequest cannot loadhttp://server/arcgis/rest/info?f=json. Originhttp://localhost:8080is 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) {
02 // I know we don't want to get used to the habit of using try-catch
03 // programming, but esri.request is a core part of the API.
04 // We don't want unexpected(*) error in the code below to affect
05 // normal response processing workflow (not to mention what we're doing
06 // below is an optimization - not a critical functionality)
07 // Note: the term "unexpected" means the developer overlooked something
08
09 var ioConfig = esri.config.defaults.io,
10 processed = ioConfig._processedCorsServers;
11 if (!ioConfig.corsDetection) {
12 return;
13 }
14 try {
15 var origin = new dojo._Url(url);
16 origin = (origin.host + (origin.port ? (":" + origin.port) :"")).toLowerCase();
17 if (
18 // Browser support
19 esri._hasCors &&
20 // ServerInfo is available since version 10.0, but token service has
21 // issues prior to 10 SP1
22 //this.version >= 10.01 &&
23 // Interested in ArcGIS REST resources only
24 (url && url.toLowerCase().indexOf("/rest/services") !== -1) &&
25 // AND server not already known to support CORS
26 (!esri._hasSameOrigin(url, window.location.href) && !esri._canDoXOXHR(url)) &&
27 // AND NOT already processed
28 !processed[origin]
29 ) {
30 //console.log("***************** esri._detectCors *********** ]", url);
31 //console.log("***************** [fetching server info] **************** ", origin);
32 processed[origin] = -1;
33 // TODO
34 // Can we use fetch "rest/services" instead of "rest/info"? This will allow
35 // 9.3 servers to get in the action.
36 // How reliable and fast is "rest/services" resource?
37
38 // If we use esri.request, it will use proxy to get the response.
39 // We don't want that - because we want to find out if cross-origin
40 // XHR works. So let's use dojo.xhrGet directly.
41 dojo.xhrGet({
42 url: url.substring(0, url.toLowerCase().indexOf("/rest/") +"/rest/".length) + "info",
43 content: { f: "json" },
44 handleAs: "json",
45 headers: { "X-Requested-With": null }
46 }).then(
47 function(response) {
48 //console.log("REST Info response: ", arguments);
49 if (response) {
50 processed[origin] = 2;
51 // Add this server to corsEnabledServers list
52 if (!esri._canDoXOXHR(url)) {
53 ioConfig.corsEnabledServers.push(origin);
54 }
55 // Yes - response.error is also considered as confirmation for
56 // CORS support
57 }
58 else {
59 // Indicates no support for CORS on this server. Older servers
60 // that don't support ServerInfo will follow this path.
61 // Dojo returns null in this case.
62 processed[origin] = 1;
63 }
64 },
65 function(error) {
66 //console.error("REST Info FAILED: ", error);
67
68 // Mark this server so that we don't make info request again
69 processed[origin] = 1;
70 }
71 );
72 }
73 }
74 catch (e) {
75 console.log("esri._detectCors: an unknown error occurred while detecting CORS support");
76 }
77 };

在这个函数中有这样一个请求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，或者我们铁定要继续使用代理。那我觉得我们是不是就没必要去发送这个请求来测试服务器了吧。那这样的话可以使用下面的方法来避免这个错误：

在加载地图之前，添加如下代码：

或者

当然，这只是我的个人见解，结合到你的实际情况可能未必正确。

关于该函数中具体的代码，你感兴趣的话可以再深入研究。这只是我的一些很浅的理解，如果你有更深的认识，欢迎批评指正。