如何使用Nuxt 3 Security修复img-src CSP内容安全策略问题

这个错误是因为你的Content Security Policy（CSP）中img-src指令仅允许加载当前域名（'self'）和data URI的图片，而你要加载的https://www.mywebsite.com/logo.svg属于外部域名，不在允许范围内。

解决方法是在nuxt-security的配置中，将目标域名添加到img-src的允许列表：

1. 打开项目根目录的nuxt.config.ts文件
2. 在security配置项的contentSecurityPolicy.directives中修改imgSrc字段：

export default defineNuxtConfig({
  modules: ['nuxt-security'],
  security: {
    contentSecurityPolicy: {
      directives: {
        // 保留原有允许项，新增目标域名
        imgSrc: ["'self'", 'data:', 'https://www.mywebsite.com']
      }
    }
  }
})

如果需要允许该域名下的所有子域名，可使用通配符https://*.mywebsite.com，但建议尽量精准指定域名，避免过度放宽CSP规则带来的安全风险。

修改配置后重启Nuxt服务，CSP规则会自动更新，图片即可正常加载。

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