如何修复Nuxt中因CSP（或CORS）导致的图片加载失败问题？

问题原因 #

当前内容安全策略（CSP）仅允许从'self'和data:协议加载图片，而Auth0的图片域名不在允许列表内，导致浏览器拦截了图片请求。

解决方案 #

根据你的Nuxt版本，修改CSP配置，将Auth0相关的图片域名加入img-src白名单：

针对Nuxt 3 #

1. 在项目根目录的nuxt.config.ts中，添加或修改security配置项：

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        directives: {
          imgSrc: ["'self'", 'data:', 'https://*.auth0.com', 'https://*.gravatar.com']
          // 可根据实际图片域名调整，比如特定租户的Auth0域名可写为https://your-tenant.auth0.com
        }
      }
    }
  }
})

2. 重启Nuxt服务，使配置生效。

针对Nuxt 2 #

有两种配置方式可选：

• 方式一：直接在head中设置meta标签

export default {
  head: {
    meta: [
      {
        httpEquiv: 'Content-Security-Policy',
        content: "img-src 'self' data: https://*.auth0.com https://*.gravatar.com;"
      }
    ]
  }
}

• 方式二：使用@nuxtjs/helmet插件配置

export default {
  modules: ['@nuxtjs/helmet'],
  helmet: {
    contentSecurityPolicy: {
      directives: {
        imgSrc: ["'self'", 'data:', 'https://*.auth0.com', 'https://*.gravatar.com']
      }
    }
  }
}

2. 重启Nuxt服务，验证图片加载状态。

注意事项 #

• 若不确定Auth0图片的具体域名，可查看浏览器控制台中被拦截的图片请求地址，提取对应域名加入白名单。
• 尽量避免使用*这类宽泛通配符，优先限制到具体的Auth0相关域名，保障站点安全。

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