如何为@import url()配置cross-origin（跨域）？

CSS 里的 @import 和 url() 语法本身不支持直接设置 cross-origin 属性，这是因为 CSS 资源的跨域处理逻辑与脚本不同，浏览器对 CSS 的跨域策略默认偏宽松，但如果需要精准控制跨域模式（比如带凭证跨域），可以通过以下两种方式实现：

• 改用 <link> 标签引入外部样式，设置 crossorigin 属性
  放弃使用 @import，直接用 HTML 的 <link> 标签引入 CSS 文件，它支持和脚本一致的 crossorigin 属性配置：

  <!-- 匿名跨域模式（不带凭证） -->
  <link rel="stylesheet" href="https://example.com/style.css" crossorigin>
  <!-- 带凭证的跨域模式（会发送Cookie等凭证） -->
  <link rel="stylesheet" href="https://example.com/style.css" crossorigin="use-credentials">
  

  这是目前唯一能给 CSS 资源明确指定跨域模式的官方方案，因为 <link> 属于 HTML 元素，原生支持 crossorigin 属性。

• 处理 CSS 中 url() 引入的资源（如字体、图片）
  如果是 CSS 内部用 url() 加载的资源（比如跨域字体）需要控制跨域：

  1. 确保资源服务器配置正确的 CORS 响应头（如 Access-Control-Allow-Origin）
  2. 在引入该 CSS 的 <link> 标签上设置对应的 crossorigin 属性，CSS 内所有 url() 加载的资源会自动继承这个跨域模式

需要注意：CSS 规范并未给 @import 和 url() 语法定义跨域属性的设置入口，因此无法直接通过这两个语法本身配置跨域，只能借助外层的 HTML 标签或服务器端配置来实现。

内容的提问来源于stack exchange，提问作者Pixlmoon