使用Spline 3D元素时JS模块遭遇CORS错误求助及部署疑问

问题说明 #

使用module形式引入Spline 3D的JavaScript文件时，直接通过本地file://协议打开页面会触发CORS错误：

Access to script at 'file:///D:/js%20learn/spline.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

快速解决方法（无需上传远程服务器） #

1. 本地启动HTTP服务器 #

file://协议的CORS限制本质是浏览器对本地文件的安全限制，用本地HTTP服务器运行项目就能绕过：

• Node.js方式：打开命令行，进入项目所在目录（比如D:/js learn），执行命令：

  npx http-server
  

  命令执行后会生成一个本地HTTP地址（如http://localhost:8080），用浏览器访问该地址即可正常加载模块。
• Python方式：根据Python版本执行对应命令：
  • Python 3：

    python -m http.server
    

  • Python 2：

    python -m SimpleHTTPServer
    

  访问生成的http://localhost:8000即可。

2. 修改浏览器启动参数（仅临时测试用） #

• Chrome浏览器：右键快捷方式，在目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开本地HTML文件。
• Firefox浏览器：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将值改为false，重启浏览器即可。

远程服务器上传操作（若需部署） #

如果确实要上传到远程服务器，步骤如下：

1. 准备好所有项目文件：HTML文件、spline.js、Spline 3D模型资源等。
2. 将所有文件上传到服务器的同一目录（可通过FTP工具、服务器后台文件管理功能完成）。
3. 使用服务器提供的HTTP/HTTPS地址访问HTML文件，此时模块引入不会触发CORS错误。

内容的提问来源于stack exchange，提问作者G'oggle