【js】解决读取文件源内容总是得到默认index.html

news2024/11/17 0:50:53

在项目开发中,资源的获取都可以通过网络,所以获取文件内容,只需要将文件地址作为请求发送即可

读取文件源内容

	const path = '资源地址(必须是绝对路径)'

      fetch(path)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.text()
        })
        .then((data) => {
          console.log('data===', data)
        })
        .catch((error) => {
          console.error(
            'There has been a problem with your fetch operation: ',
            error,
          )
        })

问题

请求发送成功,但是获取的内容是默认的index.html
在这里插入图片描述
思考

  1. 为什么返回的不是请求的文件?
    请求文件资源不存在,服务器未找到匹配的文件,只能返回该项目的默认index.html
  2. 找不到文件的原因?路径错误?文件名有误?
    必须是绝对路径

我们一般项目里都会通过webpack或vite设置路径别名@,便捷开发。所以平时获取图片,导入文件都会使用别名@。此时你也是否在发送请求时使用别名@呢,问题的根据原就在此

使用别名开发时是webpack和vite等工具提供的,在dom和import导入时会自动解析
但此时我们想要将路径作为地址发送网络请求,fetch API 是不知道如何处理这个别名的,它只能发送 HTTP 请求到服务器。

解决

当使用别名时,请求地址中@别名未被解析,所以服务器找不到@目录下的文件,返回默认的index.html
在这里插入图片描述

使用绝对路径之后再次请求

在这里插入图片描述

得到正确的文件内容

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1614797.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

我与C++的爱恋:日期计算器

​ ​ 🔥个人主页:guoguoqiang. 🔥专栏:我与C的爱恋 朋友们大家好啊,在我们学习了默认成员函数后,我们通过上述内容,来实现一个简易的日期计算器。 ​ ​ 头文件的声明 #pragma once #incl…

计算机服务器中了locked勒索病毒怎么办,locked勒索病毒解密工具流程步骤

随着网络技术的不断应用与发展,越来越多的企业离不开网络,网络大大提升了企业的办公效率水平,也为企业的带来快速发展,对于企业来说,网络数据安全成为了大家关心的主要话题。近日,云天数据恢复中心接到多家…

Spring - 2 ( 14000 字 Spring 入门级教程 )

一:Spring Web MVC⼊⻔ Spring Web MVC 是⼀个 Web 框架,简称之为: Spring MVC 要真正的理解什么是 Spring MVC?我们⾸先要搞清楚什么是 MVC? 1.1 MVC 定义 MVC 是 Model View Controller 的缩写,它是软件⼯程中的…

丰田是如何用精益理念改变制造业的?

丰田,这个全球知名的汽车制造商,不仅以其高质量的产品赢得了消费者的信赖,更以其独特的精益理念深刻改变了整个制造业的面貌。那么,丰田究竟是如何用精益理念引领制造业变革的呢?天行健精益管理培训公司解析如下&#…

了解BACnet的对象模型 (三)

文章目录 前言18个对象BACnet 对象的属性设备对象(Device)的属性输入输出值对象类型及其属性 在代码中的表达Device对象的属性模拟输入对象的属性 小结 前言 在楼宇自控网络中,各种设备之间要进行数据交换,为了能够实现设备的互操…

[C++][算法基础]求组合数(II)

给定 𝑛 组询问,每组询问给定两个整数 𝑎,𝑏,请你输出 的值。 输入格式 第一行包含整数 𝑛。 接下来 𝑛 行,每行包含一组 𝑎 和 𝑏。 输出格…

【Java框架】SpringMVC(二)——SpringMVC数据交互

目录 前后端数据交互RequestMapping注解基于RequestMapping注解设置接口的请求方式RequestMapping注解的常用属性一个方法配置多个接口method属性params属性headers属性consumes属性produces属性 SpringMVC中的参数传递默认单个简单参数默认多个简单参数默认参数中有基本数据类…

机器学习-11-基于多模态特征融合的图像文本检索

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中图像文本检索技术。此技术把自然语言处理和图像处理进行了融合。 参考 2024年(第12届)“泰迪杯”数据挖掘挑战赛 图像特征提取(VGG和Resnet特征提取卷积过程详解&…

Python 比较文本文件

1、问题背景 我们需要比较一个文本文件 F 与路径下多个其他文本文件之间的差异。我们已经编写了以下代码,但只能输出一个文件的比较结果。我们需要修改代码,以便比较所有文件并打印所有结果。 import difflib import fnmatch import osfilelist[] f op…

Linux 网络操作命令Telnet

Telnet 尽管 Telnet 已经逐渐被更安全的 SSH 协议所取代,但在某些特定场景下,如对旧系统的维护或教育目的,Telnet 仍然有其使用价值。本文将介绍如何在 Linux 系统中安装 Telnet 客户端,以及如何使用它进行远程登录。 用户使用 t…

基于SpringBoot+Vue的网上摄影工作室(含源码数据库+文档免费送)

项目演示视频: 基于SpringBootVue的网上摄影工作室(含源码数据库文档免费送) 基于SpringBootVue的网上摄影工作室(含源码数据库文档免费送) 开发系统:Windows10 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工…

JEECG表格选中状态怎么去掉

官网代码(在取消选中状态的时候不生效) rowSelection() {return {onChange: (selectedRowKeys, selectedRows) > {console.log(selectedRowKeys: ${selectedRowKeys}, selectedRows: , selectedRows);},getCheckboxProps: record > ({props: {disa…

亚马逊、Lazada、速卖通怎么提高复购率?如何利用自养号测评实现销量飙升

对于跨境卖家来说,抓住客户是最重要的,很多卖家都把大部分心思放在如何吸引新客户上,忽视了已有客户的维护。其实相较于投广告、报秒杀活动吸引新客户,维护好已有客户,提升复购率的成本更低。当然,维护好客…

微软如何打造数字零售力航母系列科普02 --- 微软低代码应用平台加速企业创新 - 解放企业数字零售力

微软低代码应用平台推动企业创新- 解放企业数字零售力 微软在2023年GARTNER发布的魔力象限图中处于头部领先(leader)地位。 其LCAP产品是Microsoft Power Apps,扩展了AI Builder、Dataverse、Power Automate和Power Pages,这些都包…

Java 基础知识易错记录

Java 基础知识易错记录 ①运算符 ②continue和break ③成员变量 局部变量 ④switch case ⑤StringBuffer StringBuilder ⑥重载 重写 ⑦throw throws 运算符 public static void main(String[] args) {int a 1;System.out.println(a);System.out.println(a);}在后&#xff…

Node.js -- path模块

path.resolve(常用) // 导入fs const fs require(fs); // 写入文件 fs.writeFileSync(_dirname /index.html,love); console.log(_dirname /index.html);// D:\nodeJS\13-path\代码/index.html 我们之前使用的__dirname 路径 输出的结果前面是正斜杠/ ,后面部分是…

测试的分类(2)

目录 按照执行方式分类 静态测试 动态测试 按照测试方法 灰盒测试 按照测试阶段分类 单元测试 集成测试 系统测试 冒烟测试 回归测试 按照执行方式分类 静态测试 所谓静态测试就是不实际运行被测软件,只是静态地检查程序代码, 界面或文档中可能存在错误的过程. 不以…

Git | 分支管理

Git | 分支管理 文章目录 Git | 分支管理1、理解分支2、创建分支&&切换分支3、合并分支4、删除分支5、合并冲突6、分支管理策略合并分支模式实际工作中分支策略bug分支删除临时分支 1、理解分支 分支就类似分身。 在版本回退中,每次提交Git都会将修改以git…

.net core webapi 高颜值的接口管理系统界面取代swagger,更好调试和查看

.net core webapi 高颜值的接口管理系统界面取代swagger,更好调试和查看 安装 dotnet add package IGeekFan.AspNetCore.Knife4jUI --version 0.0.16配置文档: 配置起始页 builder.Services.AddSwaggerGen(c > {// 配置 Swagger 文档相关信息c.Swa…

圣若热城堡、贝伦塔、热罗尼莫斯修道院 BIBM 2024在里斯本等你

会议之眼 快讯 2024年BIBM(IEEE International Conference on Bioinformatics and Biomedicine)即IEEE生物信息学与生物医学国际会议将于 2024年 12月3日-6日在葡萄牙里斯本举行!这个会议由IEEE(电气和电子工程师协会&#xff09…