json文件跨域读取解决办法

已于 2022-08-24 15:04:35 修改
阅读量2.3k 收藏 7
点赞数 1
分类专栏： 前端开发 文章标签： 前端 javascript
于 2022-08-24 14:47:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JC655gf/article/details/126503363
版权

报错

Access to XMLHttpRequest at ‘file:///C:/Users/…/xx.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
访问renyuanxinxi.json文件报错，Access to XMLHttpRequest at 'file:///C:/Users/.../renyuanxinxi.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

分析原因

浏览器访问本机文件受限，json文件为本地文件，html运行调试时，在默认浏览器中打开其域名为“file:///C:/Users/…html”。访问本机文件需设法将域名改为localhost，本文采用jquery读取本地json文件，操作简便，具体方法如下：

编译器

Visual Studio Code
所需插件：live-server

操作步骤

在Visual Studio Code扩展中安装live-server如图所示
在这里插入图片描述
在html头部引入jquery

<head>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
</head>

调用getJSON函数获取本地json文件信息(显示在控制台)

    <script>
    $.getJSON("./renyuanxinxi.json",function(data){
        console.log('data--',data);
    })   
    </script>

右键选择Open with live server
在这里插入图片描述

运行结果

在这里插入图片描述

JC655gf
关注
专栏目录
通过Ajax读取本地json文件，提示跨域的原因和解决方法
艾欢欢的博客
04-23 2万+
通过Ajax读取本地json文件，谷歌报错提示跨域 本地写有一个 .json 代码文件，然后网页文件使用ajax读取，并用谷歌浏览器打开，发现谷歌报错：提示跨域。 谷歌浏览器控制台报错 但是跨域一般是由于协议、域名、端口中有一个不同，才会跨域，我在本地访问自己的文件，怎么和跨域扯上关系？而使用火狐浏览器打开，数据正常打印出来了，不过提示 XML 解析错误：格式不佳 火狐浏览器控制台 谷歌浏...
解决跨域问题的三种方法(json[、cors、反向代理)
CIA的博客
11-05 960
JSONP(json with pendding) A网站的网页在代码上访问了B网站的页面,解决主流浏览器的跨域访问问题 No 'Access-Control-Allow-Origin' 同源策略阻止跨域访问 同源策略:同ip,同端口,同协议 工作原理 前端使用一个 script 标签来创建一个 HTTP 请求，并且事先声明一个回调函数， 该回调函数的名字由 callback 参数的参数值发送给后端。 后端接收到来自前端的请求后利用 callback 参数的参数值和要给前端返回的数据拼接成一段
三大方法解决跨域问题（CORS、JSONP、Nginx代理）
weixin_73077810的博客
05-22 2423
三种方案解决跨域问题，CORS、JSONP、Nginx代理，含代码例子
JSONP实现跨域访问
最新发布
YhMjQx的博客
08-20 951
本篇文章主要讲解JSONP如何实现跨域访问，主要利用回调函数以及 标签不受同源策略的限制
利用jsonp解决js读取本地json跨域的问题
10-17
主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JSON跨域解决方案收集
weixin_30834019的博客
07-10 190
最近面试问的挺多的一个问题，就是JavaScript的跨域问题。在这里，对跨域的一些方法做个总结。由于浏览器的同源策略，不同域名、不同端口、不同协议都会构成跨域；但在实际的业务中，很多场景需要进行跨域传递信息，这样就催生出多种跨域方法。 1. 具备src的标签 原理：所有具有 src 属性的HTML标签都是可以跨域的 在浏览器中， <script> ...
让JSON跨域解决方案
Little Luck
01-20 763
第一种在进行JSON跨域访问的时候，chrome,火狐浏览器在json进行跨域访问的时候，只需要设置2个响应头为response.addHeader("Access-Control-Allow-Origin", "*"); // open your api to any client response.addHeader("Access-Control-Allow-Methods", "POST
Json和JsonP及ajax跨域的解决办法
摩尔__摩尔的博客
03-31 665
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。JSON的优点： 　　1、基于纯文本，跨平台传递极其简单； 　　2、Javascri
jquery读取json文件跨域_Jquery跨域获得Json
weixin_39620535的博客
12-21 350
这两天用Jquery跨域取数据的时候，经常碰到invalidlabel这个错误，十分的郁闷，老是取不到服务器端发送回来的json值，一般跨域用到的两个方法为：$.ajax和$.getJSON最后，仔细安静下来，细读json官方文档后发现这么一段：JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同，也就是跨域获取数据)，则需要使用...
jquery读取json文件跨域_跨域请求json文件遇到的诸多问题
weixin_39756481的博客
12-21 1807
问题最终成功解决。如果你是急性子，只想知道成功的方法，那就拉到文章末尾去吧！(#.#)这几天在写一个页面，采用的vue。数据存在一个本地json文件里。刚开始使用的vue-resource.js来异步请求json文件，那么就牵扯到了跨域问题。在前端使用了node服务器来代理。so easy对不对？但问题是只有一个页面，而且东西不是很多，希望把css、hml、js直接放在一起，直接点击html就可以...
前端解决vue-cli中axios请求本地json跨域问题
weixin_66399141的博客
05-21 2247
在根目录下vue.config.js文件（如果没有就新建js文件） 添加如下代码： module.exports = { // 配置跨域代理 devServer: { // Paths proxy: { '/example': { // 匹配所有以 '/example'开头的请求路径 target: 'http://localhost:18001/', // 目标地址 cha
跨域访问解决方法-jsonp
01-07
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
jquery跨域获取json
03-28
NULL 博文链接：https://yuky1327.iteye.com/blog/1261982
jQuery 使用 $.getJSON() 跨域获取 JSON 数据
liuzp111的专栏
04-17 2610
01 02 03 04 05 06 07 08 09 10 header('Content-type: application/json');   $user = array (     "name"  => "Unmi",     "blog" => "http:/
vue中Axios异步通信
qq_45554909的博客
12-22 324
1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异 步通信，其功能特点如下： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [ JS中链式编程 ] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON 数据 客户端支持防御 XSRF（跨站请求伪造） GitHub： https://github.com/axios/axios 中文文档：
json跨域原理及解决方法
qq_30505673的博客
11-28 499
首先，先了解浏览器有一个很重要安全性限制，即为同源策略：不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~ 举个例子: 只要协议，端口，域名有一个不同，即为跨域！ 然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。 解决方法： 1.使用jsonp解决跨域 ：（仅适用于GET请求） 实现原理：1 var eleSc...
jsonp解决跨域问题
IvyMemphis的博客
01-29 9213
JSONP解决跨域问题一级目录二级目录三级目录1. jsonp方案 一级目录 二级目录 三级目录 1. jsonp方案 jsonp实现跨域请求的原理： 动态创建在这里插入代码片
跨域解决方案一：JSONP
Leon的博客
03-29 6463
同源策略 巴拉巴拉巴拉….(定义就不讲了，简单来说就是协议、端口、域名要相同) 注意：协议和端口引起的不同，不在前端解决的范围内 JSONP jsonp的原理很简单，就是动态的创造script标签，然后利用script的src 不受同源策略约束来跨域获取数据。 第一步 动态创建 var script = document.createElement("script")...
js读取本地json文件跨域
05-15
JS读取本地json文件并不涉及跨域问题，跨域问题主要指的是在网页中跨域读取服务器上的资源。在本地读取json文件时，只需要通过Ajax请求或者引入文件的方式来获取数据即可。如果是使用Ajax请求，需要用到XMLHttpRequest对象，但需要注意的是，在Chrome浏览器中，使用XMLHttpRequest对象从本地文件中读取数据会报跨域错误。这是由于Chrome浏览器的安全策略，导致不允许服务器和客户端在同一个域名下，只能通过网络或者本地服务器的方式来获取本地json文件。 为了解决这个问题，可以建立一个本地服务器来模拟网络环境，或者使用其他解决方案，例如：开启Chrome浏览器的安全策略，或者使用CORS策略解决跨域问题。另外，在使用框架或库的时候，也可以使用其他的方法来读取本地json文件，例如：使用jQuery的$.getJSON()方法或使用AngularJS的$http服务。 总之，在读取本地json文件时，需要注意安全策略和跨域问题，选择合适的解决方案可以更好地完成工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值