有关 Access to image at ‘file:‘ from origin ‘null‘ has been blocked by CORS policy 的解决办法

最新推荐文章于 2024-06-03 08:00:00 发布
最新推荐文章于 2024-06-03 08:00:00 发布
阅读量8.5k 收藏
点赞数
分类专栏： Threejs 文章标签： chrome 前端 html ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42921357/article/details/121228209
版权
在数字孪生项目中，遇到'file:/'路径图片加载被Chrome CORS策略阻止的问题。通过尝试多种方法，如修改Chrome属性和部署环境，最终发现使用LiveServer插件配合Three.js解决，注意不能使用本地文件引用。
摘要由CSDN通过智能技术生成

有关 Access to image at ‘file:’ from origin ‘null’ has been blocked by CORS policy 的解决办法

在使用Three.js库完成数字孪生的课题中，遇到加载本地图片报错的问题，报错内容如下：

Access to image at ‘file:///（本地绝对路径）/Earth.png’ 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.

网上有关使用chrome作为调试的解决方法简单且无效，但以防只有本电脑的个例原因，也作以描述，即
右键chrome-属性-快捷方式
在目标后的文本框中添加

–allow-file-access-from-files（前有空格）

后又经历了
tomcat
anywhere
等方法，可能由于本人非计算机专业科班出身，在校期间仅专注于机器学习，对B/S端完全小白，以上方法均失败…

最终解决方法如下：
使用vscode中的插件Live Server进行调试

注：在使用Live Server插件进行调试时，头文件中对Three.js和OrbitControls.js的引用不可以使用本地文件！

夏目一树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
阿里云OSS图片访问出现跨域：Access to image at from origin has been blocked by CORS policy
彭世瑜的博客
09-08 5614
/ 使用js Image 对象报错。权限控制/跨域访问中。
Access to script at ‘file:///xxx.xxx’ from origin ‘null‘ has been blocked by CORS policy .... 解决办法
最新发布
潮汐未见潮落的博客
07-21 315
编辑单 HTML 文件，通过引入 JS 代码，JS 使用 ES Module 模块化导出，控制台发生CORS 跨域报错。
Access to XMLHttpRequest at ‘fileDxxxxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决
begefefsef的博客
08-01 4933
出于安全性考虑，Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-OriginResourceSharing，跨域资源共享)的安全策略阻止。在该文件源码中，使用了proxy获取数据，数据源使用的是文件名为mydata.json的文件。在浏览器打开本地的html文件，上面proxy中的url获取的就是一个本地文件，协议是file//，如果是在服务器启动的话，则使用的是http或者https协议。...
Access to Image at 'file:///Users canvas本地图片跨域报错解决方案
小结巴巴的博客
10-01 1万+
    1、设置跨域       添加跨域条件   crossorigin="anonymous"     前提是后端支持这个图片跨域   2、上面加了之后还是报错 　　如标题所示 　　你需要把你的项目放到服务器上面跑 　　或者自己搭建一个本地服务器 　　然后在访问你的html ...
Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案
qq_71214810的博客
05-24 1586
这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求
Access to image at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin 此图片来
浮游的博客
03-27 498
最近，在平台上发现很多图片无法展示，显示此图片来自微信公众平台，未经允许不可引用，分析原因后，发现是在发布文章时，富文本编辑器get图片，有跨域问题。在网上搜了很多方案，例如img.setAttribute(‘crossOrigin’, ‘anonymous’)，发现无效，于是想到代理服务器。思路：传递图片地址过去 让后端给转成buffer返回给前端，前端再上传二进制图片，到oss，获得链接。传过去图片地址，前端根据后端返回的blob，上传图片，最终完美解决。在前端富文本中进行配置。新建一个node项目。
import/export实验-from origin ‘null‘ has been blocked by CORS policy:
xie__jin__cheng的博客
10-11 5143
1.问题 Access to script at 'file:///D:/java/tomcat8-ac/webapps/web1/imt.js' 访问'file:///D:/java/tomcat8-ac/webapps/web1/imt.js' from origin 'null' has been blocked by CORS policy: 从原点“null”已被CORS策略阻止: Cross origin requests are only supported for protoc.
Access to image at ... from origin ... has been blocked
博客简介
05-01 623
图片跨域
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 3606
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 5506
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy
澎湖Java架构师的博客
02-26 3123
解决CORS跨域问题 今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Al
react-解决 fetch 跨域问题：Access to fetch at XXX from origin YYY has been blocked by CORS policy
weixin_40866459的博客
11-03 5888
参考链接（对我没用）： https://blog.csdn.net/qq_41956139/article/details/106564357 https://blog.csdn.net/weixin_44415625/article/details/87607924?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=d
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
使用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,...
前端项目启动报错：from origin ‘null‘ has beenblocked by CORS policy: Cross origin requests are only supported
2201_75568521的博客
08-25 2377
把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦。
Access to Image at '' from origin '' has been blocked by CORS policy：No Access-Control-Allow-Origin
detity的博客
03-05 1万+
图片跨域问题，访问不到前端添加 img.setAttribute('crossOrigin','anonymous');
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pro
cgs的博客
10-12 1万+
问题： visual studio code 中使用 open in browser 插件，在浏览器中打开 html 文件后，如下图所示： 从Sources选项卡中可以看出来，并没有加载 javascript 文件，如下图所示： html 文件内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
access to fetch at from origin has been blocked by cors policy:No access-control-allow-origin
07-28
这个错误是由于浏览器的CORS（跨域资源共享）策略引起的。...另外，还有其他一些CORS相关的响应头，如`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`等，你可能也需要根据具体情况进行配置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值