HTML CORS 设置属性

🌙
手机阅读
本文目录结构

介绍

在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如 <audio><img><link><script><video> 均有一个跨域属性 (crossOrigin property),它允许你配置元素获取数据的 CORS 请求。

crossorigin 媒体元素上的 content属性是CORS设置属性。

这些属性是枚举的,并具有以下可能的值:

关键字 描述
anonymous 对此元素的 CORS 请求将不设置凭据标志。
use-credentials 对此元素的CORS请求将设置凭证标志;这意味着请求将提供凭据。
"" 设置一个空的值,如 crossorigin 或 crossorigin="",和设置 anonymous 的效果一样。

默认情况下(即未指定 crossOrigin 属性时),CORS 根本不会使用。如 Terminology section of the CORS specification 中的描述,在非同源情况下,设置 “anonymous” 关键字将不会通过 cookies,客户端 SSL 证书或 HTTP 认证交换用户凭据。

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。

示例:使用 crossorigin 的 script 元素

你可以使用下面的 <script> 元素告诉浏览器执行来自 https://example.com/example-framework.js 的脚本且不发送用户凭据。

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

示例:Webmanifest with credentials

在获取需要用户凭据的 manifest 时,属性值必须设置为 use-credentials。即使是同源的情况。

<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。该兼容性表仍使用旧格式,因为我们尚未转换它包含的数据。 了解您将如何提供帮助!

扩展

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了