解决 Chrome 浏览器跨域加载本地文件的问题

2023年5月31日 177次阅读 来源: spoiler

解决 Chrome 浏览器跨域加载本地文件的问题

Chrome Three.js

使用 Three.js 加载本地纹理图片时，发现加载出来的 3D 模型会全部为黑色，发现是浏览器跨域问题。

浏览器报错为：

index.html:1 Access to Image at 'file:///Users/inxx/Code/Github/Note/WebGL/3D%E7%94%B5%E6%B0%94%E5%AE%A4/img/floor.jpg' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

1. Windows：

  1. 在Chrome的快捷图标上点击鼠标右键
  2. 选择属性
  3. 选择快捷方式标签
  4. 在目标里面，在原 Chrome 路径的基础上加上 –disable-web-security
  5. 点击应用
  6. 点击确定关闭属性窗口
  7. 关闭所有已打开的 Chrome，重新启动
  8. 看到地址栏下面的小黄条你使用的是不受支持的命令标记 –disable-web-security，就成功了

注意： –前面有个空格
如果是 49 以上的版本：
步骤和上面的一样，只是第4步的参数稍微不一样。

--disable-web-security --user-data-dir=C:\MyChromeDevUserData

注：C:MyChromeDevUserData 是你本地硬盘的一个目录，你自己最好新建一个，上面的目录路径换成你新建的目录就可以了。

2. Mac：

在终端中输入

open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir
    原文作者：spoiler
    原文地址: https://segmentfault.com/a/1190000015887146
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞