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同一個服務器下，就不會產生跨域了（狗頭保命）（滑稽）