【快速解决方案】浏览器的安全策略不允许通过 file:// 协议直接加载外部文件(最省事的方法)

 目录

问题摘要

解决办法

检验结果


问题摘要

  • Failed to load resource: net::ERR_FILE_NOT_FOUND
  • 🌈 Cute Code Editor 🌈.html:162 Fetch API cannot load file:///D:/%E6%A1%8C%E9%9D%A2/%E4%B8%83%E5%A4%95%E5%BF%AB%E4%B9%90/index.txt. URL scheme "file" is not supported.
  • 🌈 Cute Code Editor 🌈.html:168 Error loading text content: TypeError: Failed to fetch
        at window.onload (🌈 Cute Code Editor 🌈.html:162)

解决办法

这个错误是因为浏览器的安全策略不允许通过 file:// 协议直接加载外部文件,包括 index.txt。你需要在一个 web 服务器上运行你的代码,以便能够通过 HTTP 协议加载文件。

你可以使用简单的方法来启动一个本地的 web 服务器,例如使用 Python 的内置模块来启动一个简单的服务器。下面是如何在终端中使用 Python 来启动一个 web 服务器:

  1. 打开终端。
  2. 转到包含你的 "🌈 Cute Code Editor 🌈" 文件的目录。可以使用 cd 命令来切换到目录,例如:
cd /path/to/your/cute-code-editor-directory

在该目录下运行以下命令来启动一个简单的 web 服务器:

python -m SimpleHTTPServer 8000

或者,如果你使用的是 Python 3.x,可以运行:

python -m http.server 8000

现在,你可以在浏览器中访问 http://localhost:8000/🌈%20Cute%20Code%20Editor%20🌈.html,然后你应该能够看到你的 "🌈 Cute Code Editor 🌈" 页面,并且 "index.txt" 文件的内容应该会逐字加载到 HTML 区域中。

检验结果

 成功了这里我已经可以正常导入文件中的数据了。

我这里运行的时候不卡,直接就可以打开,很顺利,但如果你的网页打开卡的话可以换以下的方法:

考虑远程服务器,可以直接把文件上传的GitHub上,然后就可以顺利打开了(略*从根本上解决问题) 

本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~

这是我的GitHub网址,感兴趣的话可以给我个star✨嘛

🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IC封装——从基本概念到TSV

一、IC封装 在之前文章中有大致提过封装,这里展开讲讲 芯片生产流程_沧海一升的博客-CSDN博客每个半导体产品的制造都需要数百个工艺,泛林集团将整个制造过程分为八个步骤:晶圆加工-氧化-光刻-刻蚀-薄膜沉积-互连-测试-封装。_芯片生产流程h…

操作系统-笔记-第三章-内存管理

目录 三、第三章——内存管理 1、内存的基础知识 (1.1)程序装入(三种)——绝对装入 (1.2)程序装入(三种)——可重定位装入 (1.3)程序装入(三…

WPF的CheckBox中的三个状态

WPF的CheckBox中的三个状态 CheckBox控件和RadioButton控件是继承自ToggleButton类,这意味着用户可切换他们的开关状态,其中IsChecked属性是可空的Boolean类型,这意味着该属性可以设置为true,false或null。 null值表示不确定状态…

《一个操作系统的实现》windows用vm安装CentOS——从bochs环境搭建到第一个demo跑通

vm安装CentOS虚拟机带有桌面的版本。su输入密码123456。更新yum -y update 。一般已经安装好后面这2个工具:yum install -y net-tools wget。看下ip地址ifconfig,然后本地终端连接ssh root192.168.249.132输入密码即可,主要是为了复制网址方便…

CW4-6A-S、CW4-10A-S、CW4-20A-S、CW4-30A-S螺栓式滤波器

CW3L2-3A-S、CW3L2-6A-S、CW3L2-10A-S、CW3L2-20A-S CW3-3A-S、CW3-6A-S、CW3-10A-S、CW3-20A-S、CW3-30A-S CW4EL2-3A-S、CW4EL2-6A-S、CW4EL2-10A-SCW4EL2-20A-S、CW4EL2-30A-S CW4E-3A-S、CW4E-6A-S、CW4E-10A-S、CW4E-20A-S、CW4E-30A-S CW4E-40A-S(001)、CW4E-50A-S(0…

小说作者分享:如何利用爱校对使我的作品更出彩?

在创作小说的过程中,校对和修改是至关重要的步骤。许多作家已经开始利用“爱校对”这一工具,有效地提高他们作品的质量。本篇文章将通过实际案例,展示一些小说作者是如何成功地利用爱校对来精雕细琢他们的文字,并将作品提升到一个…

vue 弹出框 引入另一个vue页面

为什么要这么做,适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错 index页面点击解约按钮,弹出框 进入jieyue.vue 核心代码 <el-buttonsize"mini"type"text"icon"el-icon-edit"v-if"scope.row.delFlag 0"click"j…

Jenkins工具系列 —— 配置邮箱 每个job下动态设置临时发送人

文章目录 安装插件添加邮箱认证邮箱申请&#xff08;以QQ邮箱网页为例&#xff09;jenkins添加邮箱认证 jenkins设置邮箱相关信息配置全局邮件单个JOB邮箱配置 安装插件 点击 左侧的 Manage Jenkins —> Plugins ——> 左侧的 Available plugins 添加邮箱认证 邮箱申请…

vue3 tailwindcss的使用

首先安装依赖&#xff1a; npm install -D tailwindcsslatest postcsslatest autoprefixerlatestnpm i -D unocss 然后vite.config.ts中 引入 import Unocss from unocss/viteexport default defineConfig({plugins: [Unocss(),],})终端执行&#xff1a; npx tailwindcss in…

基于Java SpringBoot+vue+html 的地方美食系统(2.0版本)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,csdn、博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 技术栈3 系统流程的分析3.1 用户管理的流程3.2个人中心管理流程3.3登录流程 4系统设计…

Rides分布式缓存

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#x…

网络安全--负载均衡

一、负载均衡配置 1.在全局的http下写下它&#xff1a; upstream nginx_boot{# 30s内检查心跳发送两次包&#xff0c;未回复就代表该机器宕机&#xff0c;请求分发权重比为1:2server 192.168.0.000:8080 weight100 max_fails2 fail_timeout30s; server 192.168.0.000:8090 we…

QT Quick之quick与C++混合编程

Qt quick能够生成非常绚丽界面&#xff0c;但有其局限性的&#xff0c;对于一些业务逻辑和复杂算法&#xff0c;比如低阶的网络编程如 QTcpSocket &#xff0c;多线程&#xff0c;又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等&#xff0c;在 QML 中要么不可…

【Python爬虫案例】爬取大麦网任意城市的近期演出!

老规矩&#xff0c;先上结果&#xff1a; 含10个字段&#xff1a; 页码&#xff0c;演出标题&#xff0c;链接地址&#xff0c;演出时间&#xff0c;演出城市&#xff0c;演出地点&#xff0c;售价&#xff0c;演出类别&#xff0c;演出子类别&#xff0c;售票状态。 代码演示…

CodeSite for .NET Crack

CodeSite for .NET Crack CodeSite for.NET与Visual Studio集成&#xff0c;通过实时查看器日志记录系统提供对代码执行的更深入了解&#xff0c;该系统有助于在本地或远程执行代码时快速查找问题。超越传统的断点调试&#xff0c;在应用程序继续运行时记录应用程序的执行&…

03:TIM定时器

目录 一:TIM 1:介绍 2:定时器的分类 3:基本定时器 4:通用定时器 5:高级定时器 6:定时器的基本结构 二:定时中断功能 A:定时器定时器中断 1:连接图 ​编辑 2:步骤 3:函数介绍 4:代码 三:外部时钟功能 A:定时器外部时钟 1:连接图 2:函数介绍 3:外部时钟代码 一…

Python编程基础-文件的打开和读取

文件的访问 使用 open() 函数 打开文件 &#xff0c;返回一个 file 对象 使用 file 对象的读 / 写方法对文件进行读 / 写的 操作 使用 file 对象的 close() 方法关闭文件 打开文件 open()方法&#xff0c;需要一个字符串路径&#xff0c;并返回一个文件对象&#xff0c;默认是”…

C# OpenCvSharp DNN 二维码增强 超分辨率

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.Dnn; using OpenCvSh…

数据结构 - 线性表的顺序存储

一、顺序存储定义&#xff1a; 把逻辑上相邻的数据元素存储在物理上相邻的存储单元中。简言之&#xff0c;逻辑上相邻&#xff0c;物理上也相邻顺序表中&#xff0c;任一元素可以随机存取&#xff08;优点&#xff09; 二、顺序表中元素存储位置的计算 三、顺序表在算法中的实…

kubernetes--技术文档-真--集群搭建-三台服务器一主二从(非高可用)-三服务器位于同交换机中

在使用k8s之前如果不太熟悉k8s的可以先看这个文章&#xff1a; kubernetes--技术文档--基本概念--《10分钟快速了解》_一单成的博客-CSDN博客 三节点相同安装操作&#xff1a; 1、设置hosts解析 根据角色在三个服务器中运行&#xff0c;设置自己的hostname。 标识&#xf…