关于json:谷歌浏览器获取本地json文件跨域问题

46次阅读

共计 1244 个字符,预计需要花费 4 分钟才能阅读完成。

很多单页利用,仅仅简略的 HTML 页面时须要拜访同一门路下的 JSON 数据文件,会报到跨域问题。无奈获取到本地 JSON 文件。

  1. 为什么会遇到跨域问题呢?
    跨域,即浏览器有一个平安机制,叫做 同源策略(CROS),不同域的客户端脚本在无明确受权的状况下,是不能读取对方资源的。它保障了一个域的脚本只能读写本域内的资源,而无法访问其余域的资源。简略了解:能够说跨域就是不同源。

很多单页利用,仅仅简略的 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>

正文完
 0