解决html访问本地数据时出现的跨域问题

2024-04-16 03:19:03

问题：

由于现在有很多好用的网页可视化工具，经常需要加载本地的数据来进行绘制网页，但是直接使用ajax访问时会提示has been blocked by CORS policy.因此查询可用的方法。

解决办法：

1.使用jsonp解决跨域

（仅适用于GET请求）
<script> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。
所以 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入。JSON 的数据格式和 JavaScript 语言里对象的格式非常相似，可以在js中可以使用json数据对象。所以在我们约定的函数里面可以直接使用这个对象。
实例：

编写本地json文件

dataJson({"status": "success", "data": [118.1290863180754, 24.502297442349725]})

注意：这里一定要保留status字段，data字段对应的值是你真正要使用的数据，dataJson是后面你需要调用的函数名字。

编写js函数

function getInJson(data){console.log("加载数据中~");console.log(data['data']);
}

上面这两行命令的功能分别是在控制台端输出加载数据中~，输出输入数据中data字段对应的值，也就是我们真正需要使用的数据。

插入script标签读入数据调用函数

<script type="text/javascript" src="../data/in.json?cb=getInJson"></script>

src包含两个部分，?号以前的部分是数据的本地地址，这里采用相对路径对应，?号以后的部分是调用的函数，需要注意这里的函数名应与之前定义的本地文件中的函数名以及回调函数名称一致。

解决html访问本地数据时出现的跨域问题相关推荐

LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题 1.JS调用遇到跨域解决示例 2.axios请求接口遇到跨域问题 2.1.post请求 2.2.get请求 3.RTS ...
uniapp前端向后端发送请求时，出现跨域问题的解决方法与原理
h5代理打开h5页面的端口是8081,实际访问的后端端口是8021 修改方式: 在manifest里的源码模式中,添加如下代码: 调用接口的地方这样写: 原理: 直接访问8021端口时,显示跨域问题 ...
使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
解决谷歌访问本地文件和跨域问题
解决谷歌访问本地文件和跨域问题(非代码) 一.解决不能访问本地文件问题一般浏览器是不能通过load方法来加载本地文件的,那么我们可以右键点击属性. 然后将"–allow-file-acce ...
java 使用oos 进行数据上传和跨域
java 使用oos 进行数据上传和跨域导入依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
概念: 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.所谓同源是指,域名,协议,端口均相同. http://www ...
axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问数据的请 ...
解决QT接受串口数据时数据更新不及时，串口数据太多导致程序界面崩溃，串口接收数据过快等问题
1.问题背景最近在使用上位机测试传感器接受数据是否正常,发现了很多问题,由于没有系统的学过Qt,用到什么库就学什么库,导致库中的函数很多不清晰,产生了标题中的一系列问题,经过不断的尝试,终于解决上述 ...
压缩、解压解决客户端查询大批量数据时等待时间过长的问题
在项目中查询时,因数据量大,导致网络传输很慢,这就需要在服务器端查询出的数据进行压缩处理,后传输完了在客户端进行解压处理(此为在Silverlight中压缩与解压): 具体方法如下: using Ne ...

最新文章

热门文章