HTML

在 HTML5 中，我们可以使用

但是，在某些情况下，我们可能需要在不同域之间共享资源，例如，在从 CDN（内容分发网络）获取资源或在不同的子域或主域之间共享资源时。在这些情况下，HTML 提供了一个属性来解决跨域问题

使用 crossorigin 属性

crossorigin 属性是

设置 crossorigin 属性的语法如下所示：

<audio src="https://example.com/audio/music.mp3" crossorigin="anonymous"></audio>

或

<audio src="https://example.com/audio/music.mp3" crossorigin="use-credentials"></audio>

crossorigin 属性的取值

anonymous

anonymous 是 crossorigin 属性的默认值，这意味着浏览器会使用匿名方式访问跨域资源。从服务器返回音频文件时，服务器不会验证请求是否与该文件关联，因此无法从客户端公开用户信息。

设置 crossorigin 属性时，如果只需要获取跨域资源并不会向服务器发送用户凭证，则应该使用 "anonymous"。

use-credentials

use-credentials 可以通过将用户凭证（如 cookie 和 HTTP 认证）传递到跨域服务器来实现跨域请求。这意味着服务器可以验证跨域请求是否与用户有关联。

当服务端提供了支持CORS（Cross-Origin Resource Sharing）协议并配置了客户端域的信任，同时我们也配置了

注意事项

• crossorigin 属性只适用于跨源资源的获取。如果音频文件和网页在同一域下，则不需要使用 crossorigin 属性。
• 设置了 crossorigin 属性为 "use-credentials" 后，服务器需要支持和设置 CORS，并且必须配置域名来进行信任。
• 如果在打开音频文件的相同文档的其他源中以不同的方式打开相同的音频文件，则 crossorigin 属性必须设置相同的值。
• 在使用 crossorigin 属性时，请确保跨域资源的来源可被信任，否则可能会导致安全问题。
• 不支持的浏览器不会强制执行 crossorigin 属性，因此某些浏览器可能会绕过这个属性。

参考文献

• MDN crossorigin 属性
• CORS详解