为何跨域源的img标签无需crossorigin属性即可在浏览器正常加载？

问题解答 #

• 首先要明确：浏览器的同源策略限制的是JavaScript读取跨域资源的内容，而非禁止加载跨域静态资源本身。像图片、CSS文件、JS脚本这类资源，浏览器默认允许直接跨域加载——因为它们只是用来渲染页面，浏览器不会主动让脚本获取这些资源的内部数据。你这个例子里，img标签只是让浏览器把图片显示出来，完全在允许范围内，所以不需要crossorigin也能正常加载。

• 那crossorigin属性的作用是什么？只有当你需要用JavaScript去读取这个图片的内容时才需要它。比如你用Canvas的getImageData()方法提取图片像素数据，或者用toDataURL()把图片转成base64格式，这时候就必须满足两个条件：

  1. 图片所在服务器配置了CORS响应头（允许你的域名访问）
  2. img标签加上crossorigin属性（比如crossorigin="anonymous"）
     否则浏览器会因为同源策略阻止脚本读取操作，抛出跨域错误。

• 简单总结：跨域加载资源≠跨域读取资源内容，前者默认允许，后者才需要CORS配置和crossorigin属性配合。

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