Posted by 指定在获取图像资源时使用的 CORS 模式的关键字的 DOMString。如果不指定 crossOrigin，则在不使用 CORS (获取无 CORS 模式)的情况下获取图像。
anonymous
元素的请求的模式设置为 cors，凭据模式设置为 same-origin。这意味着，如果从加载文档的同一源获取映像，则启用 CORS 并发送凭据。
use-credentials
Htmlimagelement 的请求将使用 CORS 模式和 include 凭证模式; 元素的所有映像请求将使用 CORS，而不管提取来自哪个域。
JavaScript
下面的代码演示了如何在 < img > 元素上设置 crossOrigin 属性，以配置 CORS 访问权限来获取新创建的图像。
const imageUrl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png";
const container = document.querySelector(".container");
function loadImage(url) {
const image = new Image(200, 200);
image.addEventListener("load",
() => container.prepend(image)
);
image.addEventListener("error", () => {
const errMsg = document.createElement("output");
errMsg.value = `Error loading image at ${url}`;
container.append(errMsg);
});
image.crossOrigin = "anonymous";
image.alt = "";
image.src = url;
}
loadImage(imageUrl);
HTML
<div class="container">
<p>Here's a paragraph. It's a very interesting paragraph. You
are captivated by this paragraph. Keep reading this paragraph.
Okay, now you can stop reading this paragraph. Thanks for
reading me.</p>
</div>CSS
body {
font: 1.125rem/1.5, Helvetica, sans-serif;
}
.container {
display: flow-root;
width: 37.5em;
border: 1px solid #d2d2d2;
}
img {
float: left;
padding-right: 1.5em;
}
output {
background: rgba(100, 100, 100, 0.1);
font-family: Courier, monospace;
width: 95%;
}