使用 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:
- 在Chrome的快捷图标上点击鼠标右键
- 选择属性
- 选择快捷方式标签
- 在目标里面,在原 Chrome 路径的基础上加上 --disable-web-security
- 点击应用
- 点击确定关闭属性窗口
- 关闭所有已打开的 Chrome,重新启动
- 看到地址栏下面的小黄条你使用的是不受支持的命令标记 --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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。