如何在Nuxt 3中配置或禁用CSP以正常渲染图片？

问题背景 #

在Nuxt项目中渲染s.gravatar.com域名的图片时，触发CSP报错：

Refused to load the image because it violates the following Content Security Policy directive: "img-src 'self' data:".

已尝试通过Nuxt配置添加该域名到CSP规则，但未生效，当前配置代码：

export default defineNuxtConfig({
  security: {
    headers: {
      xXSSProtection: '1',
      contentSecurityPolicy: {
        'img-src': ["'self'", 's.gravatar.com', 'data:']
      }
    }
  }
})

可行解决步骤 #

• 调整Nuxt Security配置结构
  若使用nuxt-security v2.x及以上版本，CSP需通过csp.directives单独配置，而非嵌套在headers下，修改后的配置：

  export default defineNuxtConfig({
    security: {
      csp: {
        directives: {
          'img-src': ["'self'", 's.gravatar.com', 'data:']
        }
      },
      headers: {
        xXSSProtection: '1'
      }
    }
  })
  

• 排查服务器端重复CSP配置
  检查部署服务器（如Nginx、Vercel、Netlify等）是否额外设置了CSP标头，若存在需合并规则，或禁用服务器端CSP，仅保留Nuxt的配置。

• 强制刷新浏览器缓存
  使用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除浏览器缓存的旧CSP规则，确保新配置生效。

• 验证CSP标头状态
  打开浏览器开发者工具（F12）→「网络」标签，重新加载页面后查看请求响应头的Content-Security-Policy字段，确认s.gravatar.com已包含在img-src规则内。

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