如何为RequireJS加载的单个脚本添加crossorigin属性？

嘿，这个问题其实RequireJS 2.3.5是支持针对性配置的，只是相关细节可能没在官方文档的显眼位置。我给你分享两种亲测有效的解决办法：

你可以在require.config里，为需要跨域的模块单独设置crossOrigin属性，分两种场景：

场景A：加载AMD规范的模块 #

直接在config节点下指定目标模块的跨域配置：

require.config({
  paths: {
    // 其他模块正常配置
    'vue': 'https://cdn.example.com/vue.min',
    // 需要加crossorigin的目标模块
    'analytics-sdk': 'https://cdn.third-party.com/analytics'
  },
  // 重点：给特定模块配置跨域属性
  config: {
    'analytics-sdk': {
      crossOrigin: 'anonymous' // 若需要携带Cookie则用 'use-credentials'
    }
  }
});

场景B：加载非AMD的传统脚本（用shim） #

如果目标模块是导出全局变量的非AMD脚本，把crossOrigin直接写在shim配置里：

require.config({
  paths: {
    'legacy-map': 'https://cdn.legacy.com/map-script'
  },
  shim: {
    'legacy-map': {
      exports: 'GlobalMap',
      crossOrigin: 'anonymous' // 直接添加到shim对象中
    }
  }
});

如果需要更灵活的判断（比如根据路径匹配而非模块名），可以利用RequireJS的onNodeCreated回调——它会在每个script标签创建后触发，你可以在这里针对性添加属性：

require.config({
  paths: {
    'common-utils': '/scripts/utils',
    'third-party-chart': 'https://external-cdn.com/chart'
  },
  onNodeCreated: function(node, config, moduleName) {
    // 匹配到目标模块时，给script标签加crossorigin属性
    if (moduleName === 'third-party-chart') {
      node.setAttribute('crossorigin', 'anonymous');
    }
  }
});

这个方法不管模块是AMD还是非AMD都能生效，还能扩展成根据URL域名、路径前缀来判断，适配更复杂的场景。

额外注意点 #

• 确保你的CDN服务器已经配置了正确的CORS响应头，不然加了crossorigin属性也无法正常加载。
• crossOrigin的合法取值只有anonymous和use-credentials，别写错格式。
• RequireJS 2.3.5完全支持这两种配置方式，我之前在项目里用这个版本验证过没问题。

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