天天看點

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指定:

ArcGIS API for JavaScript 4.x 本地部署之跨域問題解決法:CORS

然後打開測試頁面(測試頁面我copy了一份SceneView的demo :點我)

我驚訝地發現Chrome這個沙雕警告并報錯(清除緩存重新打開Chrome後解決了),然而在edge、IE、火狐上都沒問題。

2. 四浏覽器驗證(Nginx伺服器2的測試頁面通路Nginx伺服器1的API資源)

截圖如下

ArcGIS API for JavaScript 4.x 本地部署之跨域問題解決法:CORS

均無問題。

3. Apache伺服器(端口1570)驗證

ArcGIS API for JavaScript 4.x 本地部署之跨域問題解決法:CORS

剛開始是失敗的,又是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未清除緩存時請求報錯資訊

ArcGIS API for JavaScript 4.x 本地部署之跨域問題解決法:CORS

在調試頁面的Network頁籤中,看到請求頭有一個"Provisional headers are Shown",這個資訊我還沒查過,但是隻要清除了緩存就沒了(如果API所在伺服器的CORS配置是準确的話)

6. 廢話

如果把測試頁面放在API同一個伺服器下,就不會産生跨域了(狗頭保命)(滑稽)

繼續閱讀