部署在Heroku的Angular应用Auth0回调突然失败的排查求助

我之前也碰到过几乎一模一样的问题！当时折腾了好一会儿，最后发现确实是**内容安全策略(CSP)**限制太严导致的，下面分享我的解决步骤：

1. 先明确CSP阻止的具体资源 #

打开浏览器开发者工具的「Console」面板，找到那条CSP错误的详细信息——它会告诉你到底是哪个外部资源（比如Auth0的CDN脚本、样式）被default-src: self规则挡住了。通常都是Auth0的cdn.auth0.com域名下的资源，因为默认的CSP只允许加载当前域名的内容。

2. 调整CSP策略，允许Auth0相关资源 #

根据你使用的框架/服务器，修改CSP的配置，把Auth0需要的源加进去：

• 如果是用Express的helmet中间件（很多Node.js项目会用它设置安全头），可以这样配置：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      // 允许加载Auth0的脚本
      scriptSrc: ["'self'", "https://cdn.auth0.com"],
      // 允许加载Auth0的样式，注意有些Auth0样式需要'unsafe-inline'
      styleSrc: ["'self'", "https://cdn.auth0.com", "'unsafe-inline'"],
      // 如果用了弹窗式登录，还要允许Auth0的域名作为frame源
      frameSrc: ["https://your-auth0-tenant-domain.auth0.com"],
    },
  })
);

• 如果是直接在HTML的<meta>标签里设置CSP，修改对应的标签内容：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.auth0.com; style-src 'self' https://cdn.auth0.com 'unsafe-inline'; frame-src https://your-auth0-tenant-domain.auth0.com;">

3. 额外检查几个容易忽略的点 #

• 确认Auth0控制台的回调URL完全匹配：包括协议（http/https）、域名、路径，比如你的app现在用https://myapp.heroku.com/callback，白名单里就不能写http://开头的。
• 检查服务器端的/callback路由：确保它是用GET方法定义的（Auth0默认用GET回调），并且路由逻辑没有因为CSP导致的前端错误而中断。

调整完CSP之后，再测试认证流程，应该就能解决"Cannot GET /callback"的问题了——我当时就是因为CSP阻止了Auth0的回调脚本，导致整个回调流程没走完，服务器端的路由也没被正确触发。

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