ArcGIS API for JavaScript 4.x 本地部署之跨域问题解决法:CORS
众所周知,在离线部署ArcGIS API for JavaScript时,有时候会产生微件上的字体、符号变成方框的问题。这是遇到了跨域,只需要对所在服务器进行配置即可。
本篇使用的环境是:API配置在Nginx服务器1中,测试页面在Nginx服务器2中,服务器1端口为1569,服务器2端口为1581。
此时,测试页面请求API中的字体、符号资源时,属于端口不同产生的跨域。
所以,要配置Nginx服务器1(端口1569)的跨域信息。
最后,我还用Apache服务器(端口1570)上的测试页面,对Nginx服务器1进行跨域访问(端口1569)
关于IIS、Apache只需找到如何配置Access-Control-Allow-Origin这个参数的资料即可,原理类似。
ps:除了CORS,官方更推荐使用代理,可以查阅官方帮助文档中的Guide部分。
1. 配置Nginx服务器1(地址:http://localhost:1569)
打开conf/nginx.conf文件,如下添加一行:
意思是,该Nginx服务器允许来自http://localhost:1581的跨域请求。
或者在http下的server下的location指定:
然后打开测试页面(测试页面我copy了一份SceneView的demo :点我)
我惊讶地发现Chrome这个沙雕警告并报错(清除缓存重新打开Chrome后解决了),然而在edge、IE、火狐上都没问题。
2. 四浏览器验证(Nginx服务器2的测试页面访问Nginx服务器1的API资源)
截图如下
均无问题。
3. Apache服务器(端口1570)验证
刚开始是失败的,又是Chrome的缓存问题,清除缓存重新加载页面就好了。
4. 注意事项
4.1 Chrome浏览器记得清除缓存
如果不清除缓存,切换不同服务器上的测试页面仍然会跨域(Chrome nmsl)
4.2 Nginx服务器1(端口1569)重新配置后需要重启
这不废话吗...
5. 遗留问题
5.1 Nginx服务器如何配置多个跨域地址
上文只单独为Nginx服务器2或者Apache服务器配置了跨域,如何能让Nginx服务器2和Apache服务器同时访问Nginx服务器1上的API资源,我还没有学习。
应该还是在Nginx服务器1上的配置文件进行设置,需要查阅资料;
5.2 Chrome未清除缓存时请求报错信息
在调试页面的Network选项卡中,看到请求头有一个"Provisional headers are Shown",这个信息我还没查过,但是只要清除了缓存就没了(如果API所在服务器的CORS配置是准确的话)
6. 废话
如果把测试页面放在API同一个服务器下,就不会产生跨域了(狗头保命)(滑稽)