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

news/2024/5/10 2:49:10/文章来源:https://blog.csdn.net/VLOKL/article/details/132418676

 目录

问题摘要

解决办法

检验结果


问题摘要

  • 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✨嘛

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

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

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

相关文章

网银快捷支付接口怎么申请?

快速支付是一种方便的支付方式,允许用户在不重复输入卡号、密码等详细信息的情况下,使用预绑定的银行卡或支付账户进行快速支付。 在快速支付中,用户可以选择在商家网站、移动应用或支付平台上使用快速支付选项,并选择绑定的银行…

数据结构之——(手撕)顺序表

本章会介绍的知识点如下图: 1: 顺序表的概念:顺序表是用一段物理地址连续的存储单元依次存储数据的线性结构,通常我们使用数组来表示,对数组进行增删查改。 顺序表的结构:逻辑结构与物理结构都是内存中一块…

《vue3实战》在created生命周期中运用slice()方法结合element plus组件实现电影评价系统的分页

目录 前言 电影评价系统的分页是什么?它具体的作用体现在哪些方面? 一、slice的含义、语法和作用以及created的作用 slice是什么?slice有什么语法?slice的作用体现在哪些方面? created生命周期的作用:…

【C语言学习】指针变量

一、运算符& 1.&运算符可以获得变量的地址,它的操作数必须是变量 int i; printf("%x",&i);2.地址的大小是否与int相同取决于编译器 int i; printf("%p",&i);//%p以32进制输出i的地址二、指针变量 指针变量是保存地址的变量…

precision指标的average参数

同样适用于recall、F1 分类任务种类 先说一下分类任务分几种,分类任务主要分为二分类、多分类和多标签这三种。 现在假设我们有一个样本,叫s 二分类是最常见的,将s分给A或B这两类。 多分类是将s分给A或B或C或更多的类别。 多标签是有A、B、…

VSCode如何为远程安装预设(固定)扩展

背景 在使用VSCode进行远程开发时(python开发之远程开发工具选择_CodingInCV的博客-CSDN博客),特别是远程的机器经常变化时(如机器来源于动态分配),每次连接新的远程时,都不得不手动安装一些开…

【网络基础实战之路】VLAN技术在两个网段中的实际应用详解

系列文章传送门: 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 【网络基础实战之路】基于…

laravel aws s3

由于公司有境外项目,服务器、文件存储都是用的亚马逊,真真地是没有用过,在此记录一下自己的s3研究结果 Laravel - aws - s3 第一步创建用户,生成秘钥: 第二步创建存储桶: 1、创建存储桶时,以下…

html动态爱心代码【一】(附源码)

前言 七夕马上就要到了,为了帮助大家高效表白,下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐,可用于520,情人节,生日,表白等场景,可直接使用。 效果演示 文案修改 var loverNam…

对于个人来说,ChatGPT有什么用,缺点有哪些?

ChatGPT聊天机器人风靡全球,但也有一些人它认为模糊了原创性的界限,扼杀了创造力,还有些人害怕被机器人取代,由此失去生计和职业发展前景。 但更多的人更愿意积极拥抱ChatGPT,除了内容本身,最主要的是相比…

Power apps:做个简单的扫码应用

Power apps的扫码应用只能客户端使用 一、创建一个窗口"扫码APP”,插入媒体工具“条形码读卡器” 二、如果需要在扫码时做一个动作,可以设置它的属性,比如跳转窗口之类的 三、添加一个文本标签,实现在扫码后标签显示条形码&#xff08…

《Go 语言第一课》课程学习笔记(十)

复合数据类型 同构复合类型:从定长数组到变长切片 由多个同构类型(相同类型)或异构类型(不同类型)的元素的值组合而成,这类数据类型在 Go 语言中被称为复合类型。 数组有哪些基本特性? Go 语…

C语言和JavaScript中的默认排序行为对比

前言 今天在js里使用sort时遇见了一个不理解的现象 即使用sort默认排序后 9 从排序前的第一位被排到了最后一位.一开始我对js sort的理解和c一样,然后通过查阅后发现并不是这样. 正文 排序是一项常见而重要的操作。不同的编程语言提供了不同的排序函数&#xf…

【Unity3D】程序纹理简单应用

1 几何纹理应用 本文所有案例的完整资源详见→Unity3D程序纹理简单应用。 1.1 边框 1)边框子图 Border.shadersubgraph 说明:Any 节点用于判断输入向量中是否存在一个分量非零,Branch 节点根据输入的真假走不同的分支,详见→Shad…

威班8月份PMP模拟考试实录(附大D老师考前寄语)

威班8月份模拟考试于2023年8月12日在深圳市福田区兴华大厦成功举办,这次考试依旧是通过线上线下同步的方式,在深圳周边的学员直接到达现场做卷考试,全国各地不能到达现场的其他学员已提前收到考试所需要的文件,与现场学员同时参加…

python解析小说

前言 在信息爆炸的时代,网络上充斥着大量的小说资源,让人们能够随时随地尽享阅读的乐趣。然而,有些小说网站要求用户付费才能获取完整的内容,这给许多人带来了困扰,尤其是像我这类对金钱概念模糊的人。不过&#xff0…

基于学习交流社区的自动化测试实现

一 项目介绍 项目名称 项目名称: 学习交流社区 项目介绍 项目介绍: 学习交流社区是一个基于Spring的前后端分离的在线论坛系统。使用了MySQL数据库来存储相关信息,项目完成后使用Xshell将其部署到云服务器上。 前端页面: 前端共由…

【LeetCode】151. 反转字符串中的单词 - 双指针

目录标题 2023-8-22 09:53:10原始优化 151. 反转字符串中的单词 2023-8-22 09:53:10 也是想到了快慢指针的思想。 原始 class Solution {public String reverseWords(String s) {int length s.length();Integer pre null;Integer last null;StringBuilder stringBuilde…

使用fdisk分区时,确实创建了一个分区,但是这个分区似乎并没有被Linux系统识别解决方法

使用fdisk分区时,确实创建了一个分区,但是这个分区似乎并没有被Linux系统识别解决方法 故障现象描述 这是我的sdb硬盘我想给他扩展一个分区sdb4 我开始扩展硬盘 似乎没用什么太大的问题也同步到磁盘了使用lsblk查看一下分区情况 系统并没有扫描到sdb4这…

第六章,创作文章

6.1添加创作页面 <template><div class="blog-container"><div class="blog-pages"><div class="col-md-12 panel"><div class="panel-body"><h2 class="text-center">创作文章&l…