如何通过css link标签设置crossorigin属性

crossorigin属性用于指定link标签加载跨域资源时是否启用CORS协议。默认不带值时为anonymous模式，即不发送凭据；设置为use-credentials时表示可携带凭据，但需服务器支持。当外部样式表引用跨域字体时，必须在link标签中添加crossorigin属性，并确保服务器返回正确的CORS头（如Access-Control-Allow-Origin），否则浏览器可能阻止字体加载，导致显示异常。常见用法是<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin>，等同于crossorigin="anonymous"。若使用use-credentials模式，服务器还需返回Access-Control-Allow-Credentials: true。该属性虽小但关键，尤其在引入第三方字体服务时常被忽略，进而引发资源加载失败问题。

在使用 <link> 标签引入外部资源（如字体、样式表）时，若资源来自不同域名，可能需要设置 crossorigin 属性来处理跨域请求。这在加载 CORS 保护的资源（比如自定义字体）时尤为重要。

什么是 crossorigin 属性？

crossorigin 属性告诉浏览器是否应使用 CORS（跨域资源共享）协议来获取资源。即使你只是加载一个 CSS 文件，如果它引用了跨域资源（如 @font-face 字体），浏览器仍会检查该属性。

如何在 link 标签中设置 crossorigin

只需在 <link> 标签中添加 crossorigin 属性即可。注意：该属性不带值时默认为 anonymous 模式。

常见写法如下：

立即学习“前端免费学习笔记（深入）”；

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

等同于：

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

若需携带凭据（较少见）：

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

40

查看详情

<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin="use-credentials">

实际应用场景：加载跨域字体

假设你的 CSS 中使用了自定义字体，而字体文件托管在 CDN 上。如果没有正确设置 crossorigin，浏览器可能因 CORS 策略阻止字体加载。

正确做法：

<link rel="stylesheet" href="https://fonts.example-cdn.com/font.css" crossorigin>

同时确保服务器返回正确的 CORS 头，例如：

Access-Control-Allow-Origin: * 或指定具体域名。

注意事项

• 即使 rel="stylesheet" 不直接触发 CORS 请求，但其内部资源（如字体）会受限制
• 遗漏 crossorigin 可能导致字体显示为方块或 fallback 字体
• 如果设置 crossorigin="use-credentials"，服务器必须返回 Access-Control-Allow-Credentials: true

基本上就这些。加上 crossorigin 能避免很多跨域字体加载问题，尤其是使用第三方字体服务时。不复杂但容易忽略。

以上就是如何通过css link标签设置crossorigin属性的详细内容，更多请关注php中文网其它相关文章！