跨域资源共享（CORS，Cross-Origin Resource Sharing）是前端开发绕不过去的一座大山，尤其是在你直接处理 HTML 时，CORS 可能显得更加复杂。本文将以 HTML 视角 来探讨 CORS 的问题，剖析常见挑战并提供有效的解决方法。

CORS 是什么？

CORS 是浏览器的一种安全机制，旨在防止恶意网站未经授权获取其他来源的数据。它通过一系列 HTTP 头来控制哪些资源可以被跨域访问，如何被访问。

在 HTML 中，你可能会遇到以下情况触发 CORS 问题：

• <img> 加载跨域图片。
• <script> 跨域加载脚本。
• <link> 跨域加载样式。
• <iframe> 嵌套其他域的内容。
• 使用 <video> 或 <audio> 访问跨域媒体资源。

HTML 中的 CORS 场景

1. <img> 跨域加载图片

默认情况下，浏览器允许跨域加载图片，但如果需要将图片内容用作画布（<canvas>），就需要考虑 CORS。

问题： 当你试图用 JavaScript 访问图片像素时，跨域图片会触发 跨域安全限制，导致 canvas 被标记为“污染的”。

解决方案： 在加载图片时加上 crossorigin 属性。

<img src="https://example.com/image.jpg" crossorigin="anonymous" />

服务器需设置：

Access-Control-Allow-Origin: *

2. <script> 跨域加载脚本

JavaScript 文件通常使用 <script> 标签加载，浏览器默认允许跨域加载脚本，但这些脚本的来源不可被验证。

解决方案： 如果需要验证来源，设置 crossorigin 为 anonymous 并启用子资源完整性（SRI）。

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

3. <link> 跨域加载样式表

与脚本类似，样式表也可能需要跨域加载。

解决方案：

<link rel="stylesheet" href="https://example.com/style.css" crossorigin="anonymous" />

注意：如果服务器未正确配置 CORS，浏览器会忽略样式表。

4. <iframe> 嵌套跨域内容

嵌套其他域的内容是最复杂的 CORS 情景之一，尤其当你需要与嵌套内容交互时。

问题： 默认情况下，浏览器限制跨域 iframe 的 JavaScript 访问（即 Same-Origin Policy）。

解决方案： 确保目标页面设置正确的响应头。

X-Frame-Options: ALLOW-FROM https://your-domain.com
Content-Security-Policy: frame-ancestors https://your-domain.com

5. <video> 和 <audio> 加载媒体资源

加载跨域媒体资源时，若需要操作媒体文件的元数据，需配置 CORS。

解决方案： 在 <video> 或 <audio> 标签中添加 crossorigin 属性。

<video controls crossorigin="anonymous">
<source src="https://example.com/video.mp4" type="video/mp4">
</video>

服务器需返回：

Access-Control-Allow-Origin: *

HTML 与 CORS 的限制

浏览器的安全限制

即使你的 HTML 设置了 crossorigin="anonymous"，浏览器也要求目标服务器提供正确的 CORS 响应头。如果没有，浏览器会拦截跨域请求。

缓存的影响

部分浏览器会对跨域请求启用缓存，这可能导致 CORS 配置修改后无法立即生效。可以通过以下方式禁用缓存测试：

Cache-Control: no-store

综合案例：CORS 与 <canvas>

需求：跨域加载图片到 <canvas> 并提取像素

1.HTML 部分

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

<img id="myImage" src="https://example.com/image.jpg" crossorigin="anonymous" style="display:none" />

2.JavaScript 部分

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('myImage');
 
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  console.log(imageData.data); // 访问像素数据
};

3.服务器返回的响应头

Access-Control-Allow-Origin: *

如果服务器未正确配置 Access-Control-Allow-Origin，浏览器将抛出跨域错误。

如何“赢”得 CORS ？

1. 掌控服务器

最佳实践：如果你能够控制 API 或资源服务器，确保配置正确的 CORS 头。

2. 利用代理

当无法修改服务器配置时，可以使用代理服务器将跨域请求转为同源请求。

示例：Nginx 配置

location /api/ {
proxy_pass https://example.com/;
proxy_set_header Host $host;
}

3. 提前规划资源域

在开发初期，统一规划资源加载的域名，避免跨域问题。

总结

CORS 是 HTML 应用中无法忽略的挑战，但通过了解跨域机制及其限制，结合 HTML 属性如 crossorigin 和服务器端的正确配置，可以轻松应对跨域资源共享问题。