json文件跨域读取解决办法

JC655gf

已于 2022-08-24 15:04:35 修改

阅读量2.1k

点赞数

分类专栏：前端开发文章标签：前端 javascript

于 2022-08-24 14:47:27 首次发布

本文链接：https://blog.csdn.net/jc655gf/article/details/126503363

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

报错

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

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
json文件跨域读取解决办法

浏览器访问本机文件受限，json文件为本地文件，html运行调试时，在默认浏览器中打开其域名为“file:///C:/Users/…在Visual Studio Code扩展中安装live-server如图所示。调用getJSON函数获取本地json文件信息(显示在控制台)右键选择Open with live server。所需插件：live-server。在html头部引入jquery。
复制链接

扫一扫