img 的 crossorigin 属性：图片跨域的正确打开方式

在标签加上 crossoriginuse-credentialsimg :srcstate.url alt classw-full h-full crossoriginuse-credentials/一、先澄清一个误区很多人以为img加载跨域图片会报错——并不会。html!-- 这样写完全没问题图片正常显示 -- img srchttps://other-domain.com/a.png /浏览器对img、script、link这类标签加载的资源默认是放行的。所谓跨域限制的不是加载而是JavaScript 能否读取这个资源的内容。真正会出问题的场景是jsconst img new Image(); img.src https://other-domain.com/a.png; img.onload () { const canvas document.createElement(canvas); const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0); canvas.toDataURL(); // ❌ 报错Tainted canvases may not be exported };此时 canvas 被污染tainted无法导出。这才是需要crossorigin的时候。二、crossorigin 属性的作用crossorigin告诉浏览器请用 CORS 模式去请求这个资源而不是普通模式。它有两个取值取值含义是否发送 Cookieanonymous或空值匿名跨域请求❌ 不发送use-credentials带凭证的跨域请求✅ 发送 Cookie / TLS 证书用法htmlimg srchttps://other-domain.com/a.png crossoriginanonymous /或者在 Vue 里vueimg :srcstate.url crossoriginanonymous alt /三、关键前提服务端必须配合加上crossorigin只是客户端的一半服务端必须返回对应的 CORS 响应头否则图片会直接加载失败比不加还糟。场景 1crossoriginanonymous服务端需要返回textAccess-Control-Allow-Origin: *或指定域名textAccess-Control-Allow-Origin: https://your-site.com场景 2crossoriginuse-credentials服务端必须返回具体域名不能是*并且带上凭证头textAccess-Control-Allow-Origin: https://your-site.com Access-Control-Allow-Credentials: true⚠️ 注意use-credentials时Access-Control-Allow-Origin绝对不能是*否则浏览器会拒绝。四、怎么选场景推荐值只是想在 canvas 里画图、读像素anonymous图片接口需要登录态Cookieuse-credentials不需要 JS 读取图片只是展示不加crossorigin图片放在自家 CDN / 同源不用加结论90% 的场景用anonymous就够了只有明确需要带 Cookie 时才用use-credentials。