使用fetch 从本地获取json数据 html报错

最新推荐文章于 2024-04-16 06:00:00 发布
最新推荐文章于 2024-04-16 06:00:00 发布
阅读量691 收藏
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44101482/article/details/117328339
版权

TypeError: Faile URL scheme must be “http” or “https” for CORS requet

浏览器不允许file://使用ajax调用的URL（出于安全原因）file:///D:/workspace/%E6%85%95%E8%AF%BE/08.vue/hello%20world/09.%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%B0%8F%E6%A1%88%E4%BE%8B/index.html。
需要通过Web服务器加载网页，并使用http：//或https：//而不是file：//通过该Web服务器发出ajax请求。
解决办法：通过本地服务器加载网页，并通过Web服务器发出ajax请求
http://127.0.0.1:5500/08.vue/hello%20world/09.%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%B0%8F%E6%A1%88%E4%BE%8B/index.html

Hao-1997
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create react app项目中fetch请求本地json数据报错
adam_De的博客
08-16 664
fetch请求本地json数据报错 export const getInitToDoLists = (localUrl) => { fetch(localUrl) .then(res => res.json()) .then(data => { console.log('local data', data) }) } 错误提示信息如下： 解决方案： 将对饮的json数据置于public目录下，使用fe
react踩坑记录——使用fetch获取json数据报错
weixin_33881041的博客
09-12 362
报错： 原因其实是list.json文件路径错误，该文件路径是相对于index.html的，而不是App.js或者index.js。
fetch请求本地json数据,出现的问题
zhuyin365的博客
04-20 3669
1.json文件放错位置，出现下图问题： 解决办法： 推荐博客：https://blog.csdn.net/jimolangyaleng/article/details/76999721 2.使用map遍历时，json数据格式错误，出现如图问题： 原因： fetch请求后的数据res.json(),返回的格式是{....},并不是 [ ] 的形式，不能使用map遍历 解决办法：...
详解vue中使用express+fetch获取本地json文件
10-19
本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件，非常具有实用价值，需要的朋友可以参考下
打开本地json_分离 html 与json ，只需fetch API搞定
weixin_39634878的博客
01-12 64
Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。Fetch 接口fetch()包含了fetch()方法，用于获取资源。Headers相当于 response/request 的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作。Request相当于一个资源请求。Re...
HTTP请求交互的基本过程，使用json-server快速搭建模拟的rest api接口并解决相关错误；ajax与http的的区别及API,XHR的ajax封装及使用
qq_49080239的博客
08-11 544
5、使用浏览器访问测试（GET请求）：http://localhost:3000/posts。2、后台服务器接收到请求后，调度服务器应用处理请求，向浏览器端返回HTTP响应（响应报文）（3）请求方式会用到GET/POST/PUT/DELETE。/* 4. DELETE 请求: 删除服务器端数据 *//* 2. POST 请求: 向服务器端添加新数据*//* 3. PUT 请求: 更新服务器端以及数据 *//* 1. GET 请求: 从服务器端获取数据*/html文本/json文本/js/css/图片…...
ajax获取json数据为undefined原因分析
12-12
在处理从服务器返回的JSON数据时，通常会遇到数据解析为`undefined`的问题，这可能是由于多种原因导致的。 首先，我们来讨论两种常见的JSON数据处理方式。第一种是使用`eval()`函数，这是一个全局函数，可以将一个...
vue2.5.2使用http请求获取静态json数据的实例代码
10-18
在这个例子中，我们使用了Express.js框架来搭建一个简单的本地服务器，用于提供JSON数据。首先，需要安装`express`和`body-parser`模块，这两个模块分别用于处理HTTP请求和解析请求体。在`build/webpack.dev.conf....
获取json数据并且解析
11-07
以GET为例，你可以使用JavaScript的`fetch` API或者XMLHttpRequest（XHR）来发送请求并获取JSON响应： ```javascript // 使用fetch API fetch('https://api.example.com/data') .then(response => response.json()...
gin 跨域问题
archer的技术故事
12-19 1575
在使用gin框架的时候需要处理跨域问题。下面是具体的解决方案。 func main() { r := gin.Default() r.Use(Cors()) } func Cors() gin.HandlerFunc { return func(c *gin.Context) { method := c.Request.Method //请求方法...
SpringCloudGateway集成SpringDoc CORS问题
huangliuyu00的博客
09-02 1995
集成SpringDoc后，在gateway在线文档界面，请求具体的服务接口，报CORS问题CORS。
Fetch API cannot load，URL scheme must be "http" or "https" for fan request 错误解决
热门推荐
CoderWangSon
02-14 1万+
Fetch API cannot load，URL scheme must be “http” or “https” for fan request 错误解决 这种问题是跨域资源共享问题，一般放生在做单纯的前端界面的时候，尤其是使用了vue.js或者其他的前端框架的时候。这个问题是因为你的资源存放在本地也就是file://这样的系统下，而不是网络资源比如http://。所以造成了这些框架可能找不到...
uniapp报错：request:fail abort statusCode:-1 Expected URL scheme ‘http‘ or ‘https‘ but was ‘file‘
qq_52902126的博客
11-16 3602
uniapp真机运行接口报错request:fail abort statusCode:-1 Expected URL scheme 'http' or 'https' but was 'file'
七牛云上传报错 Expected URL scheme ‘http‘ or ‘https‘ but no colon was found
gaojun15173的博客
11-28 1779
涉及调用第三方Api需要将调用地址和端口提供给他们。因此在提供七牛云调用地址时,是在本地调用该方法,日志打印使用的是 http://up.qiniu.com，配置以后 ping 可以ping通，但还是报错。问题原因：阅读源码可知使用的url和地区有关，应该是在内网环境，不指定区域，在Zone.autoZone()无法获取到区域导致请求的url为空。报错意思是：请求的url没有冒号，正常的是http:// 或者https://。相关说明：服务器环境为甲方提供的linux服务器,不是云服务器,
request:fail abort statusCode:-1 Expected URL scheme ‘http‘ or ‘https‘ but was ‘file‘
weixin_44871749的博客
07-01 6837
uniapp h5上配置了跨域请求，可以正常访问，但是在app中报错。app单独写域名就可以了。 1.main.js 代码 if(process.env.NODE_ENV === 'development'){ //开发环境 // #ifdef H5 Vue.prototype.$baseUrl = "/api/rjhj/public/index.php/" // #endif // #ifdef APP-PLUS ||MP Vue.prototype.$baseUrl =
fetch各种报跨域错误,数据无法获取的解决方案
小结巴巴的博客
09-05 5573
1、介绍     fetch 提供了一个获取资源的接口 (包括跨域)。     fetch 的核心主要包括：Request , Response , Header , Body     利用了请求的异步特性 --- 它是基于 promise 的   2、用法 var request = new Request('/users.json', { method: '...
Fetch() failed to parse url
skylike_sh的博客
07-16 263
我是在onCreate()的时候触发Fetch（）的，但是，这个时候可能页面初始化还没完成，缺少Fetch（）所需要的一些依赖。于是，我把调用时候往后挪了下，放到了mount，再调试，成功。但是通过DEBUG发现其实Request对象是能拿到url的。在调试的时候，发现Console打印了错误信息，如标题所示。后来仔细揣摩了下，觉得可能是触发Fetch（）的时间不对。我使用Marko写前端。其他框架也应该类似吧。
Swagger API 文档 | 网关集成 SpringDoc 后 Swagger 报错：Failed to fetch. Possible Reasons_ CORS Network Failure
最新发布
甘蓝的专栏
04-16 995
解决Swagger中提示CORS网络错误问题。
【解决使用fetch发送json格式的post请求报错问题】
lt012345的博客
05-01 5285
#解决使用fetch发送json格式的post请求报错问题： 提示：这里简述项目相关背景： 今天，在使用Fetch用法以 POST请求方式的参数传递时，可传输的数据格式有 x-www-form-urlencoded 和 json 两种。以 x-www-form-urlencoded 格式传参时，可以正常得到后台响应的数据，但是 以 json 格式传输时出现报错。先记录解决此问题的过程。 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中
js从本地json文件中获取数据
05-20
你可以使用XMLHttpRequest对象或者fetch API来获取本地JSON文件中的数据。 使用XMLHttpRequest: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); ``` 使用fetch: ```javascript fetch('data.json') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 以上代码都是假设JSON文件的路径为当前页面的相对路径，如果JSON文件在其他位置，需要相应地更改路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值