如何通过meta标签全局声明crossorigin="anonymous"属性

不存在可以全局配置crossorigin="anonymous"的meta标签写法，你尝试的两种写法都不符合HTML规范，无法实现预期效果。

两种错误写法的问题说明 #

• 第一种写法：<meta http-equiv="Access-Control-Allow-Origin" content="*" crossorigin="anonymous" />
Access-Control-Allow-Origin是服务端返回的CORS响应头，不在http-equiv属性支持的预定义值范围内，写在meta标签里浏览器不会识别处理。另外crossorigin是资源加载类标签的专属属性，加在meta标签上没有任何实际作用。
• 第二种写法：<meta name="crossorigin" content="anonymous">
  HTML官方规范从未定义name="crossorigin"这类元数据名称，所有主流浏览器都不会解析这个配置，自然也不会自动给页面内的跨域资源加上crossorigin="anonymous"属性。

可实现预期效果的正确方案 #

如果需要给页面内跨域资源统一配置crossorigin="anonymous"，可以按以下两种方式实现：

1. 静态资源标签逐个声明
   对所有需要跨域加载的资源标签（包括<script>、<img>、<link>、<audio>、<video>、<source>等），直接在标签上添加crossorigin="anonymous"属性，示例：

   <script src="https://cdn.xxx.com/index.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdn.xxx.com/main.css" crossorigin="anonymous">
   <img src="https://img.xxx.com/cover.png" crossorigin="anonymous" alt="cover">
   

2. 动态资源JS全局自动注入
   如果页面存在大量动态插入的资源，可以在页面所有资源加载逻辑之前插入一段JS，自动给后续创建的资源元素加上该属性，示例代码：

   const originCreateElement = document.createElement.bind(document);
   const supportCrossOriginTags = ['script', 'img', 'link', 'audio', 'video', 'source'];
   document.createElement = function(tagName) {
     const element = originCreateElement(tagName);
     if (supportCrossOriginTags.includes(tagName.toLowerCase())) {
       element.crossOrigin = 'anonymous';
     }
     return element;
   }
   

补充提示：crossorigin属性的作用是告知浏览器请求对应资源时的凭证携带策略，该配置必须绑定到具体发起资源请求的DOM元素上，当前没有元数据层面的全局声明方案。

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