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

解决 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

你可能感兴趣的:(解决 Chrome 浏览器跨域加载本地文件的问题)