网页中 audio 标签的 crossorigin 属性如何影响 Canvas 绘图
设置 crossorigin 属性可以解决跨域音频在 Canvas 中被污染无法读取的问题，但需服务器配合返回正确的 CORS 头。
跨域音频在 Canvas 中被污染的原理
当 audio 标签加载来自不同域的音频文件时，默认情况下该资源会被标记为“被污染”，无法在 Canvas 中被读取或绘制。这是因为浏览器出于安全考虑，防止跨域资源被恶意脚本读取或篡改。如果尝试在 Canvas 上绘制被污染的音频，会抛出安全错误，导致无法获取图像数据。因此，在需要将音频与 Canvas 结合使用的场景中，必须正确配置跨域策略。
corscrossorigin 属性用于指示浏览器是否应使用 CORS（跨域资源共享）来获取相关的音频文件。当设置为 anonymous 时，浏览器会发送不带凭证的跨域请求，并检查服务器是否返回 Access-Control-Allow-Origin 头。如果服务器允许，资源将不会被标记为被污染，从而可以在 Canvas 中安全使用。如果未设置该属性或服务器未正确响应，资源将保持被污染状态，无法进行绘图操作。
配置 crossorigin 属性的具体步骤
在 HTML 中，为 audio 标签添加 crossorigin 属性，通常设置为 anonymous。例如，可以使用 <audio crossorigin='anonymous' src='audio.mp3'></audio>。这告诉浏览器在请求音频时发送 Origin 头，并期望服务器允许跨域访问。如果音频文件位于同一域下，该属性可以省略，因为默认情况下同域资源不受 CORS 限制。然而，对于跨域资源，必须显式设置此属性。
除了在 HTML 中设置属性外，服务器端也必须正确配置 CORS 响应头。服务器应返回 Access-Control-Allow-Origin: * 或具体的允许域名，以允许浏览器跨域访问音频文件。如果服务器未配置这些头，浏览器将无法通过 CORS 检查，音频资源仍会被标记为被污染。因此，配置 crossorigin 属性需要前后端协同，确保请求和响应都符合 CORS 规范。
验证 CORS 配置是否生效的方法
可以通过浏览器开发者工具的网络面板检查音频请求的响应头。在加载音频后，查看响应头中是否包含 Access-Control-Allow-Origin 头。如果该头存在且允许当前域，说明 CORS 配置成功。如果响应头中未包含该头，或 Access-Control-Allow-Credentials 为 true 但 Access-Control-Allow-Origin 未设置为 *，则配置可能不完整，导致资源被污染。
在 JavaScript 中，可以尝试将 audio 元素绘制到 Canvas 上并获取图像数据。如果配置正确，代码应能成功执行，不会抛出安全错误。例如，可以使用 ctx.drawImage(audioElement, 0, 0) 并调用 ctx.getImageData()。如果操作成功，说明音频未被污染，CORS 配置有效。如果抛出安全错误，则说明配置未生效，需要检查服务器响应或 HTML 中的属性设置。
使用 crossorigin 属性的注意事项
当 crossorigin 属性设置为 anonymous 时，浏览器不会发送凭证（如 Cookie 或 HTTP Basic 认证）。如果音频资源需要凭证才能访问，应将 crossorigin 设置为 use-credentials。然而，服务器必须返回 Access-Control-Allow-Credentials: true 和 Access-Control-Allow-Origin: 具体域名，否则资源仍会被污染。因此，根据实际需求选择合适的值至关重要。
如果音频文件是 Data URL 或位于同域下，corscrossorigin 属性可以省略，因为它们不受跨域限制。Data URL 直接嵌入 HTML，不会触发跨域请求，而同域资源默认允许访问。此外，如果音频资源用于 Canvas 绘图，确保所有相关资源（如图片、视频）也正确配置了 CORS，以避免因部分资源被污染而导致整个绘图操作失败。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。