Access to script at ‘file:///C:/study...‘ from origin ‘null‘has been blocked by CORS policy

最新推荐文章于 2024-03-13 15:37:58 发布
最新推荐文章于 2024-03-13 15:37:58 发布
阅读量2.6k 收藏 3
点赞数 1
分类专栏： 前端之路 文章标签： Live serve vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43363871/article/details/121921527
版权
Access to script at ‘file:///C:/study/vite-project/dist/assets/index.d3de8eba.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.

学习vite+vue3打包后运行index.html时出现下图错误：

在这里插入图片描述
通常解决办法是搭个简单的服务运行(express+nodeJs),相对来说比较麻烦，但有个比较简单的方法——VScode编辑器安装插件即可解决：

  • vscode安装Live Server插件
    在这里插入图片描述

  • 在index.html界面单击鼠标右键找到Open with Live Server选项运行即可。

    在这里插入图片描述

smile@qingqing
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Access to XMLHttpRequest at ‘fileDxxxxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决
begefefsef的博客
08-01 4837
出于安全性考虑，Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-OriginResourceSharing，跨域资源共享)的安全策略阻止。在该文件源码中，使用了proxy获取数据，数据源使用的是文件名为mydata.json的文件。在浏览器打开本地的html文件，上面proxy中的url获取的就是一个本地文件，协议是file//，如果是在服务器启动的话，则使用的是http或者https协议。...
OurCamera：https：//www.nytimes.com20180315nyregionbike-lane-blocked-new-york.html
02-06
我们的相机 该项目使用Google的TensorFlow Machine学习包来识​​别和分类NYC街道上的... ./generate_tfrecord --folder=path/to/data_dir --train_ratio=.70 下载解压缩到data / models /文件夹中 您的数据结构应如
解决浏览器跨域加载本地文件报错 Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy
Mrlujiao_code的博客
03-19 9971
报错： Failed to load resource: net::ERR_FILE_NOT_FOUND Access to script at 'xxx' 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, http
解决Chrome直接打开threeJs的页面的报错：Access to script at XXX from origin ‘null‘ has been blocked by CORS policy
m0_56522868的博客
08-20 2430
最近在学习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,
vite2+vue3打包后浏览器打开跨域浏览器的错误
qq_37193972的博客
01-17 9557
浏览器打开html.index ： Access to script at 'file:///D:/hehai/viteObj/dist/assets/index.559fd86e.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chr.
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
Dawnchen1的博客
05-27 1万+
跨源资源请求问题解决方案 问题描述：当我们在vsCode中使用 open in brower插件打开html文件文件时，就会报错 xxx已被CORS策略阻止，引入的资源还会失效。 解决办法1 :Live Server插件 在vsCode的插件市场中搜索并安装Live Server插件： 安装好后，右键要打开的文件，就会出现“Open with Live Serve”选项，这样打开文件就不会报错了： 解决办法2：anywhere 在vsCode控制台或者cmd中安装npm install anywhe
vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
小白成长记
08-29 4067
http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。打包后的文件打开报错，原因是file文件不支持import，需要开启个服务。打开图中地址即可访问打包后的项目。进入打包后的文件夹，运行cmd。...
java.sql.SQLException: null,  message from server: “Host ‘%’ is not allowed to connect to
12-14
java.sql.SQLException: null, message from server: “Host ‘223.72.41.7’ is not allowed to connect to this MySQL server” 客户端访问时报错： 解决方法： 1，登陆服务器 mysql> use mysql; //用mysql ...
corsyusha:简单快速的代理，可在针对现有API进行原型设计时绕过CORS问题，而不必担心CORS
04-30
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch ...
Allow-CORS_-Access-Control-Allow-Origin_v0.1.2.crx
02-27
CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature. Please note that, when the add-on ...
多线程笔记_java/多线程_
10-03
线程有五种状态：新建（New）、可运行（Runnable）、运行（Running）、等待阻塞（Blocked）、终止（Terminated）。理解这些状态有助于我们更好地控制和管理线程。 三、线程同步与通信 3.1 线程同步 为避免多线程...
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pr
qq_51660806的博客
07-18 3573
解决办法： 右键----Open in Live Server (必须以服务器的形式打开)；在加载JS模块的时候，报错！
前端项目启动报错：from origin ‘null‘ has beenblocked by CORS policy: Cross origin requests are only supported
2201_75568521的博客
08-25 2242
把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦。
使用ES6模块化 错误：Access to script at ‘file:/ ......‘ from origin ‘null‘ has been blocked by CORS ...
Curtis的博客
11-11 2418
MDN跨域解决方案VSCode —> 安装插件Live Server ----> HTML文件中右键菜单选择 Open with live server
引用import的JS报错：Access to script at 'file:' from origin 'null' has been blocked by CORS policy（3种解决手段）
xiao廸要飞
05-12 4万+
直接引用带有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
Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec
最新发布
qq_57229245的博客
03-13 2070
注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pro
weixin_50518696的博客
04-18 8379
问题 学习vue的时候引用了axios，然后出现 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. 这样的报错。 <!DOCTYPE html> <html lang=...
vue时间戳--获取本地时间
The One Who's at the Front
06-07 1万+
vue中的时间戳——实时更新时间 <template> <p>当前时间：{{nowTime}}</p> </template> <script> export default{ data(){ return{ nowTime:"" } }, methods:{ getTime(){ se...
Access to XMLHttpRequest at 'file:///D:/vue/vue-first/data.json' from origin 'null' has been blocked by CORS policy
07-28
回答: 这个错误是由于浏览器的CORS策略引起的。CORS是一种安全机制，用于限制跨域请求。当浏览器发现请求的源与目标不在同一个域时，会发送一个预检请求，检查目标服务器是否允许跨域请求。如果目标服务器没有正确配置CORS头部，浏览器就会拒绝该请求，从而导致这个错误。\[1\]\[2\] 对于你提到的具体错误，'file:///D:/vue/vue-first/data.json'是一个本地文件路径，而'null'是请求的源。由于这是一个本地文件请求，而不是通过HTTP协议请求，所以CORS策略不适用于这种情况。因此，你可以通过将数据文件放在与你的应用程序相同的域中，或者使用服务器来提供数据，以避免这个错误。 #### 引用[.reference_title] - *1* [Access to XMLHttpRequest at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS ...](https://blog.csdn.net/qq_41470439/article/details/109361842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: ...](https://blog.csdn.net/qq_42416602/article/details/121731774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy](https://blog.csdn.net/weixin_51603038/article/details/129319187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值