Web頁面整合常見問題

1.1 版本

1.2 功能簡介

本文主要匯總了 Web 頁面整合程式中經常出現的問題以及解決方案。

問題描述：

使用者以非管理者身分進入數據決策系統後，存取：http://IP:Port/webroot/decision/API呼叫 ，出現如下報錯：

解決方案：

需要獲得該頁面的權限，請參考 分級權限分配

問題描述：

在 Web 頁面整合時，將報表嵌入到使用者頁面，會自動顯示 FineReport 內建工具欄。

有時使用者自訂了使用者欄，如何隱藏 FineReport 內建工具欄呢？

解決方案 1：設定範本 Web 屬性。

使用設計器開啟範本，在菜單欄上點選「範本>範本Web屬性」，可對分頁預覽、填報預覽、三種預覽方式的工具欄進行設定。

以分頁預覽設定為例，選擇「為該範本單獨設定」，取消勾選「使用工具欄」即可隱藏報表內建工具欄，如下圖所示：

解決方案 2：使用 URL 控制。

在預覽範本的頁面，URL 後面加上 &__showtoolbar__=false ，即可隱藏內建工具欄。

4.1 X-Frame-Options報錯

問題描述：

透過 iframe 內嵌報表連結到應用內報錯，報錯資訊如下所示：

透過 iframe 頁面內嵌報表連結到其他應用內，頁面報錯：xxx拒絕了我們的連結請求

按 F12 鍵，或者按滑鼠右鍵點選檢查，開啟 Chrome 的控制檯，報錯資訊為：Refused to display 'http://localhost:8080/webroot/decision/view/report?XXXXXXX'  in a frame because it set 'X-Frame-Options' to 'sameorigin'

如下圖所示：

原因分析：

X-Frame-Options 回应頭是用來給瀏覽器指示是否允許一個頁面在 <frame>, <iframe>, <embed> 或者 <object> 中展現的標記。地點可以透過確定網站沒有被嵌入到別人的地點裏面，進而避免 clickjacking 攻擊。

X-Frame-Options 有三個可能的值：

deny：表示該頁面不允許在 frame 中展示，即便是在相同域名的頁面中巢狀也不允許。

sameorigin：表示該頁面可以在相同域名頁面的 frame 中展示。

allow-from uri：表示該頁面可以在指定來源的 frame 中展示。

以上報錯是因為X-Frame-Options 回应頭的值為 sameorigin，而嵌入的地址並非相同域名，導致無法正常展現。

解決方案：

管理者進入平台，點選「管理系統>安全管理」，關閉點選挾持攻擊防護按鈕。如下圖所示：

注：若方案不生效，那說明可能在Apache、nginx、IIS、HAProxy、Express中設定了 HTTP 頭 X-Frame-Options，需要檢查相關配置檔案。

4.2 This request has been blocked; the content must be served over HTTPS

問題描述：

HTTPS 頁面嵌入 HTTP 地址報錯：This request has been blocked; the content must be served over HTTPS

原因分析：

HTTPS 是 HTTP over Secure Socket Layer，以安全為目標的 HTTP 通道，所以在 HTTPS 承載的頁面上不允許出現 HTTP 請求，因此需要將載入的 HTTP 請求更換成 HTTPS 請求，才能正常顯示。

解決方案：

方法一：

將 HTTP 頁面配置  SSL 憑證實現 https 存取，參考文檔：配置SSL憑證實現HTTPS存取，Nginx，Apache，IIS 都能做，但不是很方便，如果沒有現成可用的 HTTPS 地址可用，建議使用方法二。

方法二：

注：只適用靜態資源的載入，比如載入某一個靜態圖片。如果是決策平台或者報表嵌入到 HTTPS 的頁面，這兩個載入的時候，都不是一個靜態資源的請求，嵌入到 HTTPS 頁面的話，需要用方法一。

upgrade-insecure-requests CSP 指令的作用就是讓瀏覽器自動升級請求，防止存取者存取不安全的內容。

在 iframe 所在頁面（一般是 html、jsp）的head中加入 meta 頭即可：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

例如在 jsp 頁面的 head 部分增加 meta 頭：

4.3 Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame

問題描述：

iframe 跨域存取報錯：Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame

原因分析：

iframe 跨域存取時，如果存取了被嵌入的介面中的 dom 資訊，則會出現該報錯。

解決方案：

需要根據實際場景來尋找最合適的跨域解決辦法，常用的是 postMessage()，可參考：跨域呼叫 JS

問題描述：

在將報表整合到您自己的頁面中時，呼叫 finereport.js 內建方法時如呼叫 FR.doURLPDFPring() 方法，JS 會出現：$.support.boxModel 為空或不是物件的錯誤，如下圖所示：

原因分析：

jQuery 版本衝突導致的，您使用的 jQuery 版本和 finereport.js 中使用的版本不同，我們內建 jQuery 版本是 1.12.4 。

注：finereport.js 更多介紹請參見：FineReport內建方法

獲取 jQuery 版本方法：

按 F12 鍵，或者按滑鼠右鍵點選檢查，開啟 Chrome 的控制檯，使用命令jQuery.fn.jquery獲取jquery版本，如下圖所示：

解決方案：

將頁面中呼叫的 finereport.js 

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>

的程式碼放置在呼叫您用 jQuery 寫的程式碼之前即可解決。

在進行系統整合時，如果後臺有錯誤，會傳回錯誤碼（errorCode），具體異常碼定義可以參考 系統錯誤碼說明 。

問題描述：

整合後，html內容無法顯示，報錯XMLHttpRequest: 網路錯誤 0x2efd, 由於出現錯誤 00002efd 而導致此項操作無法完成。

原因分析：

http請求失敗

解決方案：

檢查工程是否配置了https，那麼http請求就會報錯，需要保持一致