图片跨域之谜：img 标签真的“畅通无阻”吗

🖼️ 图片跨域之谜：`img` 标签真的"畅通无阻"吗？

🤔 核心疑问

在前端开发中，我们常听到"同源策略"限制了跨域请求。但是，当你直接在 HTML 中写 <img src="https://other-domain.com/logo.png"> 时，图片却能正常显示。

这就引出了两个关键问题：

img 标签到底算不算跨域请求？
既然能显示，为什么有时候操作图片（如转 Canvas）会报错？

💡 一句话结论 ：
img 标签加载图片本身不受同源策略限制（可以跨域显示），但对图片内容的"二次操作"（如 Canvas 读取像素）受同源策略严格限制。

📂 目录

[🔍 现象解析：为什么 img 能跨域？](#🔍 现象解析：为什么 img 能跨域？)
[⚠️ 陷阱揭秘：Canvas 的"污染"问题](#⚠️ 陷阱揭秘：Canvas 的“污染”问题)
[🛠️ 解决方案：CORS 与 crossorigin 属性](#🛠️ 解决方案：CORS 与 crossorigin 属性)
[💻 实战场景：从加载到导出](#💻 实战场景：从加载到导出)
[🎓 面试高频考点](#🎓 面试高频考点)
[💡 总结与建议](#💡 总结与建议)

1. 🔍 现象解析：为什么 `img` 能跨域？

✅ 事实：`<img>`、`<script>`、`<link>` 都不受同源策略限制

浏览器的 同源策略（Same-Origin Policy） 主要限制的是 XMLHttpRequest (Ajax) 和 Fetch 这类脚本发起的请求，目的是防止恶意网站窃取用户数据。

但是，对于资源引用标签，浏览器采取了宽松策略：

<img src="...">
<script src="...">
<link href="...">
<iframe src="...">

这些标签允许加载来自任何域名的资源。这是因为网页本身就依赖大量的第三方资源（如 CDN 上的 jQuery、Google Fonts、外部图片）。如果禁止跨域，互联网将无法正常运转。

🏠 通俗比喻：

Ajax 请求 ：像是你去邻居家里借东西（读取数据）。邻居有权拒绝你（同源策略限制），除非他给你钥匙（CORS 头）。

img 标签 ：像是你站在自家阳台上看邻居家的花园。你可以看（加载显示），但你不能把手伸过去把花摘回来（操作像素/读取二进制数据）。

2. ⚠️ 陷阱揭秘：Canvas 的"污染"问题

虽然 img 能跨域显示，但如果你尝试用 JavaScript 去"操作"这张图片，问题就来了。

❌ 常见报错场景

当你试图将跨域图片绘制到 <canvas> 上，并调用 toDataURL() 或 getImageData() 时，浏览器会抛出安全错误：

javascript 复制代码

const img = new Image();
img.src = "https://other-domain.com/photo.jpg"; // 跨域图片

img.onload = () => {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // 💥 报错！Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  console.log(canvas.toDataURL());
};

🧠 原理：画布污染（Tainted Canvas）

一旦 Canvas 绘制了未授权 的跨域图片，整个 Canvas 就会被标记为 "污染"（Tainted） 状态。

目的：防止恶意网站通过 Canvas 读取用户在另一个域名下的隐私图片像素信息（例如，通过分析像素颜色推断用户在其他网站的登录状态或敏感内容）。
结果：浏览器禁止你从污染的 Canvas 中导出图片或读取像素数据。

3. 🛠️ 解决方案：CORS 与 `crossorigin` 属性

要解决 Canvas 污染问题，我们需要告诉浏览器："这张图片是允许被脚本访问的"。这需要前端和后端配合完成。

第一步：前端设置 `crossorigin` 属性

在 <img> 标签或 JS 创建 Image 对象时，添加 crossorigin 属性。

html 复制代码

<!-- HTML 方式 -->
<img src="https://other-domain.com/photo.jpg" crossorigin="anonymous" />

<!-- JS 方式 -->
const img = new Image(); img.crossOrigin = "anonymous"; // 必须在设置 src
之前或同时设置 img.src = "https://other-domain.com/photo.jpg";

⚠️ 注意 ：crossorigin 属性有两个值：

anonymous：发送跨域请求时不携带 Cookie/认证信息（最常用）。

use-credentials：发送跨域请求时携带 Cookie/认证信息（后端需配合配置 Access-Control-Allow-Credentials: true）。

第二步：后端配置 CORS 响应头

服务器必须在响应图片请求时，返回正确的 CORS 头。以 Nginx 为例：

nginx 复制代码

location ~* \.(jpg|jpeg|png|gif)$ {
    add_header Access-Control-Allow-Origin "*"; # 允许所有域名，或指定具体域名
    # 如果前端用了 use-credentials，这里不能写 *，必须写具体域名
    # add_header Access-Control-Allow-Credentials "true";
}

或者在 Node.js (Express) 中：

javascript 复制代码

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

✅ 成功效果

当前端设置了 crossorigin 且后端返回了正确的 Header 后：

浏览器会以 CORS 模式 请求图片。
图片加载成功后，Canvas 不会被污染。
你可以自由调用 toDataURL()、getImageData() 等方法。

4. 💻 实战场景：从加载到导出

下面是一个完整的、可复用的工具函数，用于安全地加载跨域图片并转换为 Base64。

javascript 复制代码

/**
 * 安全加载跨域图片并转为 Base64
 * @param {string} url - 图片地址
 * @returns {Promise<string>} Base64 字符串
 */
function loadCrossOriginImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    // 1. 关键：设置跨域属性
    img.crossOrigin = "anonymous";

    img.onload = () => {
      try {
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        // 2. 此时 Canvas 未被污染，可以安全导出
        const base64 = canvas.toDataURL("image/png");
        resolve(base64);
      } catch (e) {
        reject(new Error("Canvas 导出失败，可能是 CORS 配置不正确"));
      }
    };

    img.onerror = () => {
      reject(new Error("图片加载失败"));
    };

    // 3. 最后设置 src，触发加载
    img.src = url;
  });
}

// 使用示例
loadCrossOriginImage("https://other-domain.com/photo.jpg")
  .then((base64) => {
    console.log("转换成功:", base64.substring(0, 50) + "...");
    // 可以将 base64 赋值给另一个 img 标签，或上传到服务器
  })
  .catch((err) => {
    console.error(err);
  });

5. 🎓 面试高频考点

在面试中，面试官可能会这样问：

Q1: <img> 标签跨域加载图片，需要后端配 CORS 吗？

A : 如果只是显示，不需要。但如果要在 Canvas 中操作 或获取二进制数据 ，则需要后端配置 CORS，且前端需加 crossorigin 属性。

Q2: 为什么加了 crossorigin="anonymous" 还是报错？

A : 检查以下几点：
1. 后端是否返回了 Access-Control-Allow-Origin 头？
2. 后端返回的 Origin 是否与前端域名匹配（如果是 *，则不能携带 Cookie）？
3. 图片服务器是否支持 OPTIONS 预检请求（通常图片 GET 请求不需要预检，但配置错误可能导致问题）？
4. 是否是 CDN 缓存问题？（有时 CDN 缓存了不带 CORS 头的旧响应，需刷新缓存）。

Q3: anonymous 和 use-credentials 的区别？

A :
- anonymous：不发送 Cookie，后端 Allow-Origin 可以是 *。
- use-credentials：发送 Cookie，后端 Allow-Origin 不能是 *，必须是具体域名，且需返回 Allow-Credentials: true。

6. 💡 总结与建议

📝 核心总结

场景	是否需要后端 CORS	前端是否需要 `crossorigin`	说明
仅显示图片 (`<img>`)	❌ 否	❌ 否	浏览器默认允许跨域加载资源
Canvas 绘制并导出	✅ 是	✅ 是	否则 Canvas 会被污染，无法导出
Fetch/Ajax 获取图片二进制	✅ 是	✅ 是 (Fetch 中配置 mode: 'cors')	属于脚本请求，受同源策略严格限制

🚀 博主寄语

日常开发 ：如果只是展示头像、列表图，直接写 <img src="..."> 即可，无需担心跨域。
海报生成/水印处理 ：务必确认图片服务器支持 CORS，并在代码中添加 img.crossOrigin = "anonymous"。
调试技巧 ：如果 Canvas 报错，打开浏览器 Network 面板，查看图片请求的 Response Headers，确认是否有 Access-Control-Allow-Origin。

记住口诀 ：

图片加载本无界，同源策略不拦截。

若要 Canvas 做处理，跨域头里显真章。

前端加上 crossorigin，后端 Allow-Origin 配。

两者配合天衣无缝，像素读取任我行。

希望这篇文档能帮你彻底搞懂图片跨域的奥秘！如果有疑问，欢迎在评论区留言。👇

喜欢这篇文章吗？记得点赞、收藏、转发哦！ ❤️

图片跨域之谜：img 标签真的“畅通无阻”吗