眾所周知,在離線部署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同一個服務器下,就不會產生跨域了(狗頭保命)(滑稽)