html中使用es6模块，报错：Access to script at ‘file:///C:/Users/joney/Desktop..._html中不能使用es6 import access to script-CSDN博客

html中使用es6模块，报错：Access to script at ‘file:///C:/Users/joney/Desktop...

最新推荐文章于 2024-03-13 15:37:58 发布
最新推荐文章于 2024-03-13 15:37:58 发布
阅读量9.2k 收藏 12
点赞数 9
分类专栏： 问题记录 文章标签： html javascript chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/123546302
版权

报错

报错情况如下：
在这里插入图片描述
百度翻译可知，其跨域了！！

CORS 策略已阻止从源"null"访问"file:///C:/Users/joney/Desktop/%E9%9D%A2%E8%AF%95%E4%BB%A3%E7%A0%81/17.%E5%A4%96%E9%83%A8%E8%84%9A%E6%9C%AC.js"处的脚本：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、chrome-untrusted、https。

因为你是在本地打开的文件，而file协议并不支持，只有http, data, chrome, chrome-extension, https这些协议是支持跨域请求的。浏览器地址栏显示的确实不是http协议

在这里插入图片描述

解决方法

vs code 下载Live Server插件，然后使用其打开
在这里插入图片描述
这时打开的是http协议，默认打开的是http://127.0.0.1:5500/…在这里插入图片描述

不会报错！！
在这里插入图片描述

焦妮敲代码
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
webstorm和.vue中es6语法报错的解决方法
12-09
1.webstorm中es6语法报错，解决方法： 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错，但是.vue文件中es6语法依然报错。 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html文件，可以编辑css，js，也都有智能提示。但是，在.vue文件中es6语法还是报错。 (2).粗暴：直接在<s
美观：一个JavaScript模块，可让文本变得时尚https://aesthetically.glitch.me
02-05
目录 演示版 查看。 安装 使用 ： 作为ES6模块： < script type =" module " > import Aesthetically from "https://cdn.jsdelivr.net/npm/[email protected]/dist/aesthetically.js" ; </ script > 作为普通脚本： < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/aesthetically.umd.js " > </ script > 自托管： 作为ES6模块
使用ES6模块化 错误：Access to script at ‘file:/ ......‘ from origin ‘null‘ has been blocked by CORS ...
Curtis的博客
11-11 2240
MDN跨域解决方案VSCode —> 安装插件Live Server ----> HTML文件中右键菜单选择 Open with live server
Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec
最新发布
qq_57229245的博客
03-13 987
注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。
dental-defender：从https：//github.comcsheppcandyjam删除，改写为ES6，打字稿
02-04
防卫者：糖果部落的传奇 #candyjamHTML5射击/塔防游戏 该项目是从派生的，改写为打字稿，更新到Phaser 3并使用ES6。 控制项 移动： w s a d 目的：鼠标 拍摄： mouse-left 选择项目： 1 2 3 4 影片示范
解决Unable to access 'https://gitee.com/自己的项目/': Could not resolve host: gitee.com问题
10-14
主要介绍了解决Unable to access 'https://gitee.com/自己的项目/': Could not resolve host: gitee.com问题,需要的朋友可以参考下
vue项目打包
haruhyuhae的博客
09-24 342
vue打包（简化版） 首先在原项目中执行打包命令 npm run build 执行npm init，建立package.json文件 执行cnpm intall express，建立node框架 建立app.js文件 const express = require("express"); const app = express(); app.use(express.static("./dist")); app.listen(8080, () => { console.log("serv
vue打包访问html报错
SongGuoQ的博客
05-29 2216
vue打包报错，访问html文件报错 具体什么原因暂不清楚，只是有了解决方案，如果有大佬了解请指教 报错提示: index.html:1 Access to script at 'file:///C:/js/chunk-vendors.e399ec81.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, da
Access to XMLHttpRequest at ‘file:///C:/Users/Lenovo/Desktop/%E4%B8%93%E5%91
qq_45947664的博客
09-13 7293
3、问题解决，编译器直接跳转默认编辑器，打开工作区页面，5500是live server自动分配的端口，如果没有自动跳转，就新建终端，输入“live-server --port=8081”，ps：8080端口可能被占用。1、使用VSCode的话 下载Live Server插件，通过安装这个插件就可以使用http协议打开file本地文件页面。4、点击Fn+F12查看，没有报错信息。5、此方案行不通的话，请移步。2、点击Go Live。
vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
小白成长记
08-29 3790
http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。打包后的文件打开报错，原因是file文件不支持import，需要开启个服务。打开图中地址即可访问打包后的项目。进入打包后的文件夹，运行cmd。...
HttpClinet.rar_http://www.pudn.com_vc http_vc http
09-14
VC++ HTTP Access Cla
wechat-user-service.rar_http://wechata_nodeJS 微信_nodejs_wechat_w
09-24
nodejs编写的微信用户管理模块；用的是ES6及babel编译
es6.io::fire:入门文件供所有人使用ES6学习
04-12
每个人的ES6入门文件 在上学习ES6所需的一切
解决Chrome直接打开threeJs的页面的报错：Access to script at XXX from origin ‘null‘ has been blocked by CORS policy
m0_56522868的博客
08-20 2318
最近在学习threeJs制作物联网智慧园区，但是发现了一个问题，每次打开页面必须要通过VsCode的liveServer来打开，比较麻烦。 本人是后端和前端都要自己动手的非计算机专业的学生，但是讲道理，作为静态资源应该直接可以双击index.html打开的，为什么就不行呢？看了一下控制台的报错，又是熟悉的安全政策，所以此时久产生了两种解决办法了： 1、换一个没有这种安全策略的浏览器，也就是说不要用谷歌了 2、看论坛里没有人说怎么在谷歌中解决这个问题，自己也搜索了一下，发现找到简单便捷的解决办法..
解决Cross origin requests are only supported for protocol schemes的三种办法
热门推荐
chenmoupeng的博客
07-13 5万+
今天在写了一个简单的H5页面，项目结构如下图所示 然后在运行的时候突然报错 Access to script at ‘file:///Volumes/PERSON/font_end/h5xuexi/h5-learning3/vue_nocli/js/main.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http,
使用es6模块化出现Access to script at 'file:///... ..from origin 'null' has been blocked。。。错误
北芒的博客
03-26 3万+
Access to script at ‘file:///C:/Users/admin/Desktop/test/te.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome,...
vue3 vite打包后页面控制台报错Access to script at ‘file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
WDY2018312901的博客
09-17 1178
vue3 vite打包后页面控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
引用import的JS报错：Access to script at 'file:' from origin 'null' has been blocked by CORS policy（3种解决手段）
xiao廸要飞
05-12 3万+
直接引用带有import关键字的JS脚本会报错：Access to script at ‘file:’ from origin ‘null’ has been blocked by CORS policy index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
Failed to load resource: net::ERR_FILE_NOT_FOUND index.html:1 Access to script at 'file:///D:/static/js/index-2d27bd93.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. index-2d27bd93.js:1 Failed to load resource: net::ERR_FAILED /D:/static/nlogo.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
06-10
从错误信息来看，第一个错误是 `Failed to load resource: net::ERR_FILE_NOT_FOUND`，说明浏览器无法找到 `index-2d27bd93.js` 文件。这个可能是因为你的服务器没有正确地映射到 `static` 目录，请确保你的服务器配置正确，并且能够正确地映射到这个目录。 另一个错误是 `Access to script at 'file:///D:/static/js/index-2d27bd93.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.`。这个错误是因为浏览器禁止从本地文件系统加载跨域脚本。你需要在一个服务器环境中运行你的应用程序，例如在 `http://localhost` 上运行你的应用程序。 还有一个错误是 `Failed to load resource: net::ERR_FILE_NOT_FOUND /D:/static/nlogo.ico:1`，这个错误是因为浏览器无法找到 `nlogo.ico` 文件。你需要确保这个文件存在于正确的路径中，并且能够被正确地映射到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值