使用script标签，设置type=module,进行引入，报跨域的错误“from origin ‘null‘ has been blocked by CORS policy: Cross origi

问题的原因

1. CORS策略：当使用模块脚本时，浏览器实施了一个称为跨源资源共享（CORS）的安全策略。这个策略阻止从本地文件系统加载的网页访问其他本地文件，因为浏览器将本地文件系统视为一个特殊的“null”源，而CORS策略不允许从一个“null”源发起跨源请求。

2. 模块导入：由于模块脚本默认从网络加载依赖，即使这些依赖同样是本地文件，浏览器也会尝试以跨源请求的方式处理它们，从而导致上述错误。

解决方案

有几种方法可以解决这个问题：

1. 使用本地服务器：
   • 你可以设置一个本地HTTP服务器来提供你的HTML文件。这可以通过多种方式实现，比如使用Python的http.server模块、Node.js的http-server包、或者Apache、Nginx等服务器软件。
   • 例如，如果你安装了Node.js，可以在命令行中运行npx http-server来启动一个简单的HTTP服务器，然后在浏览器中访问http://localhost:8080（或服务器提供的其他地址）。
2. 使用VS Code Live Server：
   • 如果你在使用Visual Studio Code，可以安装Live Server扩展。这个扩展允许你从VS Code直接启动一个本地开发服务器，并自动在默认浏览器中打开你的HTML文件。
3. 修改浏览器设置（不推荐）：
   • 某些浏览器（如Chrome）允许你通过启动参数或命令行开关来禁用CORS策略，但这通常不推荐用于生产环境或长期开发，因为它降低了安全性。
4. 使用数据URI（对于小文件）：
   • 对于非常小的文件，你可以考虑将它们转换为Base64编码，并使用数据URI直接在HTML中嵌入。这种方法对于大型文件不实用，因为它会增加HTML文件的大小，并可能影响性能。

结论

使用本地服务器是解决这个问题的最常见和最推荐的方法。它不仅解决了CORS问题，还提供了更接近真实生产环境的测试条件，包括URL结构、路由和可能的服务器配置问题。