Skip to main content

为什么在 <script type="module"> 中使用 crossorigin？

在构建输出中，你会发现入口脚本标签包含了 crossorigin 属性。这并非偶然选择，而是基于现代 Web 标准和安全最佳实践的决策。

1. 原生 ES 模块（ESM）的要求​

根据 HTML 规范，浏览器对原生 ES 模块的处理与传统脚本不同：

  • 强制 CORS 策略：所有模块请求都必须遵循 CORS（跨域资源共享）原则。
  • 默认行为：即使脚本与页面同源（同一个域名），浏览器也会以包含 Origin 头的 CORS 模式发起请求。

2. 增强错误报告（Error Logging）​

这是在生产环境中使用 crossorigin 最实际的原因：

  • 隐私保护限制：如果没有 crossorigin，当脚本加载失败或在运行时抛出异常时，浏览器出于安全考虑，只会提供及其有限的信息（通常只是 Script error.）。
  • 详细堆栈：显式声明 crossorigin（默认为 anonymous）允许浏览器捕获并显示详细的错误信息（文件名、行号、调用栈）。这对于后期通过监控工具定位生产环境 Bug 至关重要。

3. 面向跨域 CDN 的设计​

在 Web 应用的后期部署中，静态资源通常会迁移到独立的 CDN 域名（如 cdn.yaoshengwood.com）：

  • 预防拦截：如果缺少 crossorigin，尝试加载跨域模块脚本会被浏览器直接拦截。
  • 预配置：Vite 默认加上此属性，确保了无论项目部署在本地服务器还是全球分布的 CDN 上，无需修改 HTML 即可正常工作。

4. 安全性与一致性​

  • 防止信息隔离泄露：CORS 确保了敏感的 JavaScript 逻辑不会被未经授权的第三方站点通过脚本引用的方式非法探测。
  • 统一模型：这使得脚本加载的行为与现代 Web API（如 fetch()、CSS Modules、Web Workers）的安全模型保持一致。

总结​

在本项目中使用 crossorigin 是为了：

  1. 拥抱现代标准：符合 ESM 的底层运行规范。
  2. 保障可观察性：获取精准的错误追踪信息。
  3. 提升部署灵活性：确保资源跨域可用性。

威海耀晟木制品有限公司技术文档 日期：2026-01-24