Stories

Detail Return Return

谷歌瀏覽器獲取本地json文件跨域問題 - Stories Detail

很多單頁應用,僅僅簡單的HTML 頁面時需要訪問同一路徑下的JSON 數據文件,會報到跨域問題。無法獲取到本地JSON 文件。

  1. 為什麼會遇到跨域問題呢?
    跨域,即瀏覽器有一個安全機制,叫做 同源策略(CROS),不同域的客户端腳本在無明確授權的情況下,是不能讀取對方資源的。它保證了一個域的腳本只能讀寫本域內的資源,而無法訪問其他域的資源。簡單理解:可以説跨域就是不同源。
    image.png

很多單頁應用,僅僅簡單的HTML 頁面時需要訪問同一路徑下的JSON 數據文件,會報到跨域問題。無法獲取到本地JSON 文件。

  1. 為什麼會遇到跨域問題呢?
    跨域,即瀏覽器有一個安全機制,叫做 同源策略(CROS),不同域的客户端腳本在無明確授權的情況下,是不能讀取對方資源的。它保證了一個域的腳本只能讀寫本域內的資源,而無法訪問其他域的資源。簡單理解:可以説跨域就是不同源。

域: 協議、域名、端口這三者相同,視為同一個域。

但是並不是所有瀏覽器都有CROS 策略,火狐和Edge IE 是允許跨域的。

  1. 為什麼無法直接打開html 頁面來訪問 ActiveReportsJS 報表的json文件呢

ActiveReportsJS 設計的報表文件後綴是 .rdlx-json , 但本質上也是 json文件,似乎直接用html 頁面訪問同一路徑下的json文件,似乎是同一個域名,端口。 但其實是協議不同,訪問 ActiveReportsJS 報表文件,本質是 file協議,而 Chrome 跨源請求僅支持協議方案 :http, data, chrome, chrome-extension, https.

  1. 如何解決
  2. 純前端方式: 採用JSONP
    JSONP是一種非正式傳輸協議,目的就是便於客户端使用數據。 要注意區分json 和 jsonp兩個概念:
    json : 是一種數據格式。
    jsonp: 是一種數據調用方式。
    JSONP方式具有一定的侷限性:
    僅適用於GET請求;
    讀取本地json文件的話,json文件裏的數據要包含在一個函數名裏

解決方法:

  1. 使用Visual Studio Code 打開報表文件,並在前面加入
    var template=
  2. 並將報表文件的後綴改為.js
  3. 在html 頁面的<script>標籤中引入 .js 文件
  4. viewer.open(template);
  1. 部署到服務器上,注意部署也選擇 Localhost, 不能選擇IP 或者域名,如果部署為IP 或者域名就會檢測部署授權,如果您有部署授權可直接部署,如果沒有就需要在網站上申請,部署到服務器上就相當於同源了,不屬於跨域問題。 注意部署到服務器上時候,要註冊MIME 類型同JSON
    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
    <system.webServer>

    <staticContent>
        <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
    </staticContent>

    </system.webServer>
    </configuration>

Add a new Comments

Some HTML is okay.