动态脚本加载（如document.createElement('script')）本身不触发CORS错误，因<script>标签天然支持跨域加载JS——这是同源策略的明确例外；所谓“跨域异常”实为资源加载失败或执行阶段的安全限制，需区分Failed to load resource、MIME type mismatch、Script error.等真实错误类型，并通过添加crossorigin属性、服务端配置Access-Control-Allow-Origin及正确监听事件来针对性解决。
动态脚本加载（如 document.createElement('script')）本身不会触发 CORS 错误，因为 <script> 标签天然支持跨域加载 JS 文件——这是同源策略的明确例外。所谓“跨域异常”通常不是 CORS 报错，而是资源加载失败或执行阶段暴露的安全限制。处理的关键是分清错误类型、正确捕获、并针对性修复。
区分真实错误类型：不是所有报错都叫 CORS
浏览器对 <script> 的跨域加载不做 CORS 检查，但会严格校验响应内容是否为合法 JS 代码及 MIME 类型。常见报错实际含义如下：
- Failed to load resource: net::ERR_ABORTED → 网络失败（404、500、DNS 解析失败、连接超时）
-
MIME type mismatch → 服务端返回了非 JS 内容（如 HTML 页面、JSON 数据、空响应），且
Content-Type不是application/javascript或类似值 -
Script error. → 脚本执行时报错，但因跨域未配置
crossorigin，浏览器屏蔽了具体堆栈信息（安全限制） - Uncaught TypeError / ReferenceError → 脚本加载成功但执行出错（如依赖未定义、语法错误），与跨域无关
正确监听并捕获加载失败
仅靠 onerror 属性在跨域场景下不可靠（参数常为空）。推荐使用标准事件监听 + 显式 crossorigin 属性：
- 在创建
<script>元素时，必须添加crossorigin="anonymous"（若无需 Cookie）或crossorigin="use-credentials"（需凭据） - 用
addEventListener('load', ...)和addEventListener('error', ...)分别监听成功与失败 - 避免只依赖
window.onerror，它对跨域脚本错误不提供filename、lineno等关键信息
示例：
立即学习“Java免费学习笔记（深入）”；
<!-- 正确引入方式 --><script src="https://cdn.example.com/sdk.js" crossorigin="anonymous"></script>
解决 Script Error：让错误堆栈可见
当跨域脚本执行出错时，浏览器默认只显示模糊的 Script error.。要获取真实错误信息，需两端配合：
-
服务端：在 JS 文件响应头中添加
Access-Control-Allow-Origin: https://your-domain.com（不能为*，若需凭据则还需Access-Control-Allow-Credentials: true） -
前端：脚本标签必须带
crossorigin属性（如上），否则浏览器仍视其为“不透明跨域资源” - 可选增强：在
window.addEventListener('error', handler)中检查event.error对象，比window.onerror更可靠
注意后续请求的 CORS 问题（常被混淆）
动态加载的脚本（如第三方 SDK）内部发起的 fetch 或 XMLHttpRequest 请求，才真正受 CORS 限制。这不是脚本加载的问题，而是 SDK 所调用 API 的服务端未配置正确响应头所致：
- 例如 SDK 内部调用
fetch('https://api.thirdparty.com/data')，该请求会被拦截 - 解法不在前端改 script 加载方式，而在于要求第三方 API 服务端设置：
Access-Control-Allow-Origin: https://your-domain.com - 若无法协调第三方，可用代理（如 Nginx 反向代理）将请求转到同源地址，绕过浏览器检查
