配置Nuxt Security后NuxtImg无法加载Storyblok图片求助

问题背景 #

已在Nuxt 3项目的nuxt.config中配置Nuxt Security的CSP规则，允许加载self、data:及https://a.storyblok.com的图片：

security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', 'https://a.storyblok.com'],
      },
    },
  }

但使用NuxtImg组件加载Storyblok图片时仍报错：

GET https://a.storyblok.com/f/...... net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK)

已尝试为NuxtImg添加crossorigin="anonymous"属性，问题未解决。

错误原因 #

这个错误并非单纯的CSP配置问题，而是**跨源嵌入器策略（COEP）**导致的：
Nuxt Security默认启用了Cross-Origin-Embedder-Policy: require-corp，要求所有嵌入的跨源资源必须返回对应的跨源头（如Cross-Origin-Resource-Policy）。但Storyblok的图片响应未包含这类头，浏览器会将其默认视为同源资源，最终触发拦截。

解决方案 #

方案1：调整COEP策略（推荐） #

在Nuxt Security配置中放宽COEP规则，设置为unsafe-none，允许加载未携带跨源头的外部资源：

security: {
  headers: {
    contentSecurityPolicy: {
      'img-src': ["'self'", 'data:', 'https://a.storyblok.com'],
    },
    // 添加COEP配置
    crossOriginEmbedderPolicy: "unsafe-none"
  },
}

方案2：确保NuxtImg的域名配置正确 #

同时确认Nuxt Image模块已添加Storyblok的域名白名单，避免组件内部的资源处理异常：

export default defineNuxtConfig({
  image: {
    domains: ['a.storyblok.com']
  },
  // ... 其他配置
})

补充说明 #

如果不想放宽COEP策略，需要联系Storyblok在图片响应中添加Cross-Origin-Resource-Policy: cross-origin或same-site头，但这个操作依赖第三方服务，可行性较低，因此优先选择方案1。

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