如果您選取以使用 [Hub 內嵌式 iFrame] 設定來顯示自訂索引標籤 URL,且您的網站並未在 Hub Web 入口網站中正確顯示,則可以設定您的 Web 伺服器,以允許網站在 iframe 中正確顯示。

如何允許您的網站以在 Hub Web 入口網站上自訂索引標籤的 iFrame 中顯示

如果您的自訂索引標籤並未在 Hub 入口網站上的 iframe 中正確載入,表示您的網站可能已設定使用 HTTP 回應標頭 X-Frame-Options 或 Content-Security-Policy,以防止您的網站出現在 iframe 中。

如果已為您的網站設定 HTTP 標頭 X-Frame-Options,若要允許網站在 iframe 中顯示,請從網站組態中移除 X-Frame-Options 標頭。

如果已為您的網站設定 HTTP 標頭 Content-Security-Policy,若要允許網站在 iframe 中顯示,請將 frame-src 選項新增至標頭,以允許 Web 入口網站在 iframe 中內嵌您的網站。輸入為

Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;

如何設定跨來源資源共用 (CORS),以在 Hub Web 入口網站的自訂索引標籤中正確顯示影像

如果影像並未在 Web 入口網站的 iframe 中正確載入,請設定網站以允許 Web 入口網站存取影像。

影像可能不會顯示,因為基於安全性,瀏覽器會限制從指令碼起始的跨來源 HTTP 要求。這表示使用這些 API 的 Web 應用程式只能從載入應用程式的相同來源要求資源。若要允許來自其他來源的影像正確顯示,來自其他來源的回應必須包含正確的 CORS 標頭。

CORS 是以 http 標頭為基礎的機制,定義了瀏覽器和伺服器可以互動以判斷是否可安全允許跨來源要求的方式。執行特定類型的跨網域要求時,支援 CORS 的瀏覽器會向裝載跨來源資源的伺服器起始額外的「預檢」要求,以判斷其是否具有執行動作的權限。在預檢中,瀏覽器傳送的標頭會指出在實際要求中使用的 HTTP 方法和標頭。

回應時,伺服器會傳送回具有 Access-Control-Allow-Origin: * 的 Access-Control-Allow-Origin 標頭,這表示可以從任何 (*) 來源存取資源。為了擷取影像資源,系統會使用 GET HTTP 要求,且伺服器會傳送回具有 Access-Control-Allow-Method: GET Access-Control-Allow-Method 標頭,這表示可以透過 GET HTTP 要求存取資源。

若要在 Web 入口網站中正確顯示影像,您可以在網站上定義下列 CORS 預檢要求標頭。

Access-Control-Allow-Origin: <YOUR-HUB-APP-URL>
Access-Control-Allow-Method: GET

如需有關設定 CORS 的詳細資訊,請參閱跨來源資源共用網站。