HTML

简介

HTML5 中的

跨域属性

属性名：crossorigin

语法：crossorigin="anonymous" | "use-credentials"

取值：

• anonymous：表示不发送身份凭证，不跨域发送cookies。
• use-credentials：表示发送身份凭证，跨域发送cookies。

使用示例：

<video src="http://media.example.com/video.mp4" crossorigin="anonymous">

适用场景

1. 当一个页面需要嵌入来自其他网站的视频资源时，同时又需要借助CORS功能设置以满足用户体验的需要。使用此属性可以避免跨域限制的问题，并实现视频播放。

2. 常见的使用场景是在对媒体资源进行加密处理后进行跨域传输。WebKit 和 Gecko 均支持使用 HTML5 指定的 crossorigin 属性进行跨域数据加载。

限制

• 使用跨域属性需要在媒体资源所在服务器设置 CORS 标头或不限制跨域请求。否则，在跨域访问时，浏览器将禁止请求，从而导致视频无法正常播放。

• 在一些浏览器上，通过 HTTP 方式跨域传输的资源需要支持 chunked 编码，因为它们需要使用跨域资源共享（CORS）规范下的Preflight 验证。这种情况下，你需要在你的服务器上设置CORS响应头中的Access-Control-Allow-Methods属性。

结论

通过使用HTML