Nuxt JS接入Auth0登录时出现400错误（Unable to fetch script source）如何解决

当前配置背景 #

• 基于Nuxt开发的项目接入@nuxtjs/auth-next模块实现Auth0登录流程，已将本地调试地址添加到Auth0应用的允许URI列表中，除额外新增环境变量文件外，其余配置完全参照官方指引完成
• 现有Nuxt.config.js核心配置如下：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth-next',
  ],
  axios: {
    baseURL: 'http://localhost:5000',
  },
  env: {
    DOMAIN: process.env.DOMAIN,
    CLIENT_ID: process.env.CLIENT_ID,
    REDIRECT_URI: process.env.REDIRECT_URI,
  },
  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/home',
    },
    strategies: {
      auth0: {
        domain: process.env.DOMAIN,
        client_id: process.env.CLIENT_ID,
        audience: 'https://MyApiLinkFromAuth0',
      },
    },
  },
}

• /login路由下的登录组件核心逻辑：点击按钮触发this.$auth.loginWith('auth0')发起授权请求

常见触发原因与修正方式 #

• 环境变量读取异常
  一旦auth策略节点读取的环境变量未正确注入运行时，就会出现Auth0服务域名取值为空的问题，最终生成无效的脚本拉取地址，触发400错误。检查.env文件里的DOMAIN、CLIENT_ID、REDIRECT_URI取值，确认没有多余引号、结尾斜杠、拼写错误，保证这些值在Nuxt运行时能被正常读取，不存在空值。
• 回调地址配置不匹配
  当前auth策略配置没有显式声明redirectUri字段，模块会自动拼接当前运行地址生成回调URI，一旦这个自动生成的URI和你在Auth0后台配置的允许回调列表不一致（比如本地Nuxt服务实际跑在3000端口，但你只在后台加了5000端口的回调地址），就会触发请求校验失败。需要在auth0策略节点中显式补全redirectUri配置，保证和Auth0后台的允许列表完全一致。
• 内容安全策略拦截脚本请求
  项目引入的@nuxtjs/pwa模块默认会开启严格的内容安全策略，不在白名单内的域名发起的脚本请求会被浏览器直接拦截，刚好就会触发拉取脚本失败的提示。需要在pwa配置中把你的Auth0专属域名加入script-src白名单，放开跨域脚本拉取限制。
• 依赖版本不兼容
  @nuxtjs/auth-next仍处于alpha迭代阶段，不同版本和Nuxt、Auth0 SDK的兼容性存在差异，容易出现脚本地址拼接错误的问题。建议锁定经过实际验证的稳定兼容版本，避免安装到存在已知bug的版本。

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