调用同文件夹下文件时返回GET request 404 (not found)错误如何解决？

问题相关截图 #

• 请求代码截图：
  
• 项目目录截图：
  
• 控制台报错截图：
  

错误原因 #

• 文件名/路径拼写不匹配：请求路径和实际文件名大小写、后缀需完全一致，部分运行环境（如Linux服务端、部分本地静态服务）对路径大小写敏感，Text1.txt和text1.txt会被识别为两个不同文件。
• 本地文件协议访问限制：如果直接双击打开HTML文件，浏览器地址栏为file://开头的路径，浏览器出于安全策略会禁止跨本地文件发起网络请求，即使是同目录文件也会触发404报错。
• 服务路径不匹配：如果使用本地服务启动项目，要确认页面访问路径和文件存放路径层级对应，比如页面访问地址是http://localhost:8080/demo/index.html，请求text1.txt时会默认指向http://localhost:8080/demo/text1.txt，如果文件没有存放在对应demo目录下就会报错。

解决方案 #

• 优先核对请求路径：确认代码中填写的文件名和实际文件的名称、后缀、大小写完全一致。
• 不要直接打开HTML文件，使用本地静态服务启动项目，可选方式如下：
  • 安装Node.js环境的情况下，在项目目录终端执行npx serve，按终端提示访问http://localhost:3000即可。
  • 安装Python环境的情况下，Python3执行python -m http.server，Python2执行python -m SimpleHTTPServer，默认访问http://localhost:8000即可。
  • 使用VSCode编辑器可安装「Live Server」插件，右键点击HTML文件选择「Open with Live Server」直接启动服务访问。
• 若线上部署出现该问题，检查打包配置，确认text1.txt文件被正确打包到HTML同级目录，没有被打包工具过滤忽略。

内容的提问来源于stack exchange，提问作者Ashutosh Mishra