JavaScript如何不搭建服务器加载本地3D图像 解决CORS报错

报错本质是现代浏览器对file://协议的默认跨域安全限制，和three.js、marzipano等3D类库无关，无需搭建本地服务器也可正常加载本地3D图像，可直接使用以下三种方案：

• 方案一：调整浏览器启动参数放行本地文件权限
  完全退出所有Chrome/Edge后台进程，右键点击浏览器快捷方式打开「属性」，在「目标」栏的原有程序路径末尾，先加一个空格，再追加启动参数 --allow-file-access-from-files，保存后通过该快捷方式启动浏览器，再打开本地HTML页面即可正常加载本地路径下的图像资源。注意：该模式会降低浏览器安全防护等级，不要用这个配置的浏览器访问陌生公网网站，避免恶意脚本风险。
• 方案二：将图像转base64格式内嵌到代码
  提前把需要加载的全景图、纹理图转为base64编码字符串，直接作为资源地址传入3D库的加载方法，这类资源走浏览器原生支持的data:协议，完全不会触发CORS拦截。three.js加载纹理示例：

  const textureLoader = new THREE.TextureLoader()
  // 省略号替换为图片实际的base64编码内容
  const localTexture = textureLoader.load('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...')
  

  该方案的缺点是大体积图片转码后字符串长度极高，会大幅增加JS/HTML文件体积，仅适合小尺寸资源场景。
• 方案三：通过文件选择器生成本地临时地址
  在页面中加入文件选择控件，由用户手动选中需要加载的本地图像，通过URL.createObjectURL()生成浏览器认可的可信Blob地址，再传入3D库加载即可，全程不会触发跨域拦截，核心代码如下：

  <input type="file" id="fileSelect" accept="image/*">
  <script>
    const fileSelect = document.getElementById('fileSelect')
    fileSelect.addEventListener('change', (e) => {
      const selectedImg = e.target.files[0]
      const localImgUrl = URL.createObjectURL(selectedImg)
      // 将localImgUrl传入three.js/marzipano的资源加载逻辑即可正常渲染
    })
  </script>
  

提示：默认浏览器配置下，直接双击打开本地HTML文件，硬编码写死file:///C:/Users/xxx.jpg这类绝对本地路径的资源请求，必然会被CORS策略拦截，不存在其他隐蔽绕过方式。

内容的提问来源于stack exchange，提问作者Sa1m0n