crossorigin是什么？【你了解前端的crossorigin吗？！】

强者不抱怨环境

crossorigin 是什么？

crossorigin 是一个 HTML 属性，用于指定如何处理跨域请求的资源。

值：

• anonymous:请求时不会发送任何用户凭证（如 cookies、HTTP 认证等）。适用于希望从其他域请求资源，但不需要用户凭证的情况。如果资源需要凭证才能访问，那么请求将失败。
• use-credentials:请求时会发送用户凭证（如 cookies、HTTP 认证等）。适用于需要凭证才能访问的跨域资源。
• 默认值（不设置）:不会进行跨域请求，资源必须来自同源。

针对<img>：

• 用于加载跨域图像时控制请求的凭证发送。
• 从其他域加载图像并在 Canvas 上进行处理时，需要使用 crossorigin 属性来避免跨域问题。

场景: 你需要从另一个域加载一张图片，并在 Canvas 上进行处理。

<img id="myImage" crossorigin="anonymous" src="https://example.com/image.png" alt="Example Image">

<canvas id="myCanvas"></canvas>

<script>
  const img = document.getElementById('myImage');
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    // 现在可以安全地对 Canvas 上的图像进行操作
  };
</script>

针对<link>：

• 用于加载跨域样式表（CSS）。
• 使用 Google Fonts 时可能需要设置 crossorigin 属性，以确保字体可以正确加载并应用。

场景: 你从 Google Fonts 加载字体，并希望确保字体能够正确加载。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" crossorigin="anonymous">

针对<script>：

• 用于加载跨域 JavaScript 文件。
• 从其他域加载脚本并希望捕获错误信息时，可能需要设置 crossorigin 属性。

场景: 你从另一个域加载 JavaScript 文件，并希望捕获脚本执行中的错误。

<script src="https://example.com/script.js" crossorigin="anonymous"></script>

针对<video>：

• 用于视频资源的跨域请求控制。

场景: 你从另一个域加载视频文件。

<video controls crossorigin="anonymous">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

针对<audio>：

• 类似于 ，用于音频资源的跨域请求控制。

场景: 你希望从另一个域加载音频文件。

<audio controls crossorigin="anonymous">
  <source src="https://example.com/audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

注意事项：

• CORS 配置: 服务器必须正确配置 CORS 头，通常是 Access-Control-Allow-Origin，以允许跨域请求。
• 凭证模式: crossorigin=“anonymous” 表示不发送用户凭证（如 cookies），而 crossorigin=“use-credentials” 则表示发送凭证。
• 错误处理: 使用 crossorigin 可以帮助更好地处理跨域资源加载失败的情况。