使用@nuxt/fonts加载谷歌字体时本地开发控制台出现凭证错误

问题描述 #

在Nuxt 3中使用@nuxt/fonts模块加载三款谷歌字体时，Firefox和Chrome控制台出现跨域预加载错误：

发现针对'http://192.168.1.129:3000/_fonts/xMQOuFFYT72X5wkB_18qmnndmSdSnn-J-Vq1ibuGSdi.woff'的预加载，但因请求凭证模式不匹配未被使用，请检查crossorigin属性。

添加新动态路由后，又出现字体文件404错误：

GET http://192.168.1.129:3000/_fonts/wlptgwvFAVdoq2_F94zlCfv0bz1WCzsW_LM-Y7xrszA4ZH.woff
net::ERR_ABORTED 404 (Server Error)

本地开发模式下字体可正常加载，当前nuxt.config.ts相关配置如下：

modules: [
    // 为简洁起见，此处省略了其他模块
    '@nuxt/fonts',
  ],
  fonts: {
    provider: 'google'
  },

  //@ts-ignore
  security: {
    headers: {
      crossOriginEmbedderPolicy: 'unsafe-none',
      crossOriginOpenerPolicy: 'unsafe-none',
      contentSecurityPolicy: {
        'font-src': ['https://google.com'], // <--- 在此添加要获取字体的域名
      }
    },
  },

尝试修改CORS策略无效，寻求解决方法。

解决方法 #

1. 修正CSP的font-src配置 #

当前font-src仅允许加载谷歌域名的字体，但@nuxt/fonts会将谷歌字体缓存到本地/_fonts/路径，需补充本地源：

security: {
  headers: {
    contentSecurityPolicy: {
      'font-src': ['https://google.com', 'self', 'data:'],
    }
  }
}

• self：允许加载本地/_fonts/下的字体文件
• data:：处理可能存在的base64格式字体数据

2. 补全预加载字体的crossorigin属性 #

Nuxt自动生成的字体预加载标签可能缺少crossorigin="anonymous"属性，可通过自定义head配置补充：
在nuxt.config.ts中添加：

app: {
  head: {
    link: [
      // 替换为实际预加载的字体文件名，或通过useHead动态生成
      { rel: 'preload', as: 'font', href: '/_fonts/[你的字体文件名].woff', crossorigin: 'anonymous' },
      { rel: 'preload', as: 'font', href: '/_fonts/[你的字体文件名2].woff', crossorigin: 'anonymous' }
    ]
  }
}

也可在全局布局组件中使用useHead动态注入所有需要预加载的字体标签，确保都带有crossorigin="anonymous"。

3. 排查动态路由对字体路由的影响 #

添加动态路由后出现404，大概率是路由规则冲突或资源路由被覆盖：

• 检查动态路由的路径是否以/_fonts/开头，避免路由匹配冲突
• 查看nuxt.config.ts中的routeRules，确认没有拦截/_fonts/前缀的规则
• 删除.nuxt和.output文件夹，清除Nuxt缓存后重启项目

4. 调整跨域安全头配置 #

当前crossOriginEmbedderPolicy设为unsafe-none，可尝试改为require-corp并配合正确的crossorigin属性：

security: {
  headers: {
    crossOriginEmbedderPolicy: 'require-corp',
    crossOriginOpenerPolicy: 'same-origin',
    // 保留其他CSP等配置
  }
}

注意：修改后需确保所有跨域资源请求都带有正确的crossorigin属性。

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson