衆所周知,在離線部署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指定:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuAjN3IjMzEzM10SO5UzN0kDM1EDOxQDM5EDMy0CN3AzN5ATMvwFNwkTMwIzLcRzNwcTOwEzLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
然後打開測試頁面(測試頁面我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同一個伺服器下,就不會産生跨域了(狗頭保命)(滑稽)