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同一个服务器下，就不会产生跨域了（狗头保命）（滑稽）