arcgis server javascript api开发过程中,在跨域访问字体、json、地图服务等资源的时候,会遇到无法访问的问题,如:“……blocked by CORS”,“……cannot load”,后面常跟一句“No ‘Access-Control-Allow-Origin’ is present on the requested resource”的错误。
解决办法:需要跨域,使用CORS或Proxy。
以下步骤解决,针对4.8版本。
CORS
server端配置CORS
根据自己服务器情况,参考https://enable-cors.org/js添加
require(["esri/config"], function(esriConfig) {
esriConfig.request.corsEnabledServers.push("<hostname>.<domain>:<port>");
});
如果你的服务器和浏览器都支持CORS,以下就不用看了。如果你的服务器或浏览器不支持CORS,则需要设置proxy解决跨域问题。
代理proxy
步骤:
- 下载代理
下载地址 https://github.com/Esri/resource-proxy
对应版本:
代理名 | 对应服务器 |
---|---|
DotNet | IIS服务器 |
Java/JSP | Apache Tomcat 服务器 |
PHP | Apache服务器 |
- 安装代理
IIS服务器中,整体拷贝到wwwroot下。或arcgis js api网站平级目录下。转换为应用程序。
这里确保应用池的版本是4.0+,这里使用的是ASP.NET v4.0,如果返回错误请仔细检查应用程序池的问题。
在proxy.config文件中,加入允许访问的服务器地址。
- 其中,mustMatch项推荐设置为“true”,因为这样就可以保证所有的请求都必须要通过设定的serverUrls的过滤。如果设置为“false”,这将会允许一些请求直接通过。
- 如果地址需要ArcGIS全球账户的认证,那么需要在url中加入用户名和密码信息。
例如:<serverUrl url="http://services.arcgisonline.com" UserName="UserName" PassWord ="PassWord" matchAll="true"/>
前台js添加
esriConfig.request.proxyUrl = "http://...";//其中proxyUrl是你部署到IIS下的路径即可。
esriConfig.request.useProxy = false;//可不写,默认为false