使用 JSONP 解决本地 JSON 文件跨域读取问题

作者:百宝袋时间:2026-10-22 19:35:18浏览:385

本文介绍如何利用 JSONP 技术解决在本地通过 AJAX 读取 JSON 文件时遇到的跨域错误。通过解析 script 标签不受同源策略限制的特性,阐述 JSONP 的工作原理,并提供具体的代码实现与注意事项,帮助开发者绕过浏览器安全限制获取数据。

前言与问题背景

前言

本文主要介绍如何利用 JSONP 技术解决在本地通过 JavaScript 读取 JSON 文件时遇到的跨域问题,分享相关实现方案供参考学习,接下来将详细介绍具体步骤。

一、问题描述

尝试通过 AJAX 方式读取本地 JSON 文件时,谷歌浏览器会提示跨域错误,导致无法获取到 JSON 数据。


使用 JSONP 解决本地 JSON 文件跨域读取问题 配图

跨域报错.png

AJAX 获取 JSON 数据的代码示例如下:


$.ajax({
   url: "file/employeejson.json",//json文件位置
   type: "GET",//请求方式为get
   dataType: "json", //返回数据格式为json
   success: function(data) {//请求成功完成后要执行的方法 
   console.log(data); 
   }
  })

这段代码本身逻辑没有错误,但由于谷歌浏览器出于安全考虑,会拦截此类本地文件访问。不过,在火狐浏览器中该操作可以正常执行,读者可以尝试验证。

JSONP 解决跨域原理

二、解决跨域问题

采用 JSONP 方法来解决跨域限制(此方法仅适用于 GET 请求)。

实现原理如下:

<script> 标签不受同源策略的限制,它可以加载任意位置的 JavaScript 文件,无需遵循同源要求。

因此,JSONP 的核心思想是:客户端与服务端约定一个函数名。当客户端请求文件时,服务端返回一段 JavaScript 代码,这段代码会调用约定好的函数,并将数据作为参数传入。巧合的是(这也并非偶然),JSON 的数据格式与 JavaScript 中对象的格式完全一致,因此在约定的函数内部可以直接使用该对象。

具体代码实现如下:


<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>JSON文件的调用</title> 
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>  
 </head> 
 <body> 
 </body> 
 <script>
    //回调函数
  function train (data){ 
     console.log(data);
  } 
</script>

<!--jsonp中 需要注意的是 
 <script src="file/employeejson.json?cb=train"></script> 
 src ? 之前为文件地址,? 之后为回调函数callback名称, 
回调函数可以简写为 cb , 然后 回调函数 名称要与JSON文件中的名称一致 
可以在 对应的文件名中看下,如,employeejson.json?callback=train,employeejson.json的 函数名为 train--> 
<script src="file/employeejson.json?cb=train"></script>
</html> 
 //JSON文件 
train(
 [
 {
  "name":"xx",
  "id":"ww"
  }
 ]
 )

关键注意事项

三、注意事项

  • 必须确保在 JSON 文件外部使用函数名加括号的方式包裹数据;
  • JavaScript 中的回调函数名称必须与 JSON 文件中定义的函数名保持一致;

总结

以上就是本文的全部内容,希望这些内容对大家的编程学习或工作有所帮助。如有疑问欢迎留言交流,感谢支持。

作者最新文章