如何解决 img 标签的 src 属性存在跨域问题

迷途小码农零零发

已于 2024-09-29 14:09:53 修改

阅读量1.1w

点赞数 6

于 2021-12-03 11:34:29 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/121695146

版权

前端三剑客专栏收录该内容

12 篇文章

订阅专栏

`img` 标签的 `crossOrigin` 属性用于控制跨域请求的行为，特别是在加载图像资源时。它主要用于处理跨域资源共享（CORS）问题，确保图像资源可以安全地加载和使用。以下是 `crossOrigin` 属性的详细解释和使用示例。

crossOrigin 属性的值

crossOrigin 属性可以有以下三个值：

anonymous：请求不会包含凭据（如 cookies、HTTP 认证信息等）。适用于不需要用户身份验证的跨域请求。
use-credentials：请求会包含凭据。适用于需要用户身份验证的跨域请求。
“”（空字符串）：等同于 anonymous。

使用示例

示例 1：使用 anonymous

<img src="https://example.com/image.jpg" crossOrigin="anonymous" alt="Example Image">

在这个示例中，浏览器会以匿名方式请求图像资源，不会发送任何凭据。

示例 2：使用 use-credentials

<img src="https://example.com/image.jpg" crossOrigin="use-credentials" alt="Example Image">

在这个示例中，浏览器会发送凭据（如 cookies）来请求图像资源。

主要用途

跨域图像加载：确保跨域图像资源可以正确加载，并且在使用 canvas 元素进行图像处理时不会引发安全错误。
CORS 处理：控制跨域请求的行为，确保符合服务器的 CORS 策略。

结合 canvas 使用

当你将跨域图像绘制到 canvas 元素上时，如果没有正确设置 crossOrigin 属性，可能会遇到安全错误。以下是一个示例，展示如何使用 crossOrigin 属性来避免这些错误：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cross-Origin Image Example</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.crossOrigin = 'anonymous';
    img.src = 'https://example.com/image.jpg';

    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      // Now you can safely manipulate the canvas
    };
  </script>
</body>
</html>