HTML DOM 链接 crossOrigin 属性

HTML DOM 中，我们可以使用 crossOrigin 属性来指定链接元素（<link>）或脚本元素（<script>）的跨域设置。

以下是本文将要讲到的内容：

• crossOrigin 属性的语法
• crossOrigin 属性的值
• 如何使用 crossOrigin 属性
• crossOrigin 属性的注意事项

语法

下面是 crossOrigin 属性的语法：

document.querySelector('link').crossOrigin = "anonymous";
document.querySelector('script').crossOrigin = "anonymous";

属性值

crossOrigin 属性有以下三个值：

• anonymous：允许跨域访问，但不允许获取服务器上的相关资源。
• use-credentials：允许跨域访问，并允许获取服务器上的相关资源。前提是服务器需要设置 Access-Control-Allow-Credentials: true。

默认情况下，crossOrigin 属性的值为 ""，即不允许跨域访问。

使用方法

链接元素

在使用跨域链接时，我们可以这样设置 crossOrigin 属性：

<link
    rel="stylesheet"
    href="https://example.com/styles.css"
    crossorigin="anonymous"
/>

我们可以看到，在 link 元素中，我们设置了 href 属性和 crossOrigin 属性。

脚本元素

跨域脚本的使用与链接元素类似。我们可以这样设置 crossOrigin 属性：

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

在 script 元素中，我们只需要在 src 属性后面添加 crossOrigin 属性即可。

注意事项

使用 crossOrigin 属性时需要注意以下几点：

• crossOrigin 属性只能用于 link 元素或 script 元素上。
• crossOrigin 属性只对跨域资源有效。如果不是跨域资源，设置 crossOrigin 属性无效。
• 设置 crossOrigin 属性后，需要保证服务器上的资源支持跨域访问。

欢迎补充完善。