部署在Heroku上的应用登录时出现Auth0回调404错误

我之前也碰到过几乎一模一样的情况！本地跑PERN+Auth0完全正常，一部署到Heroku就卡在回调404，折腾了好几个小时才找到问题，给你几个排查方向：

• 检查前端路由的重写配置
  如果你用的是React这类SPA框架，Heroku默认不会处理客户端路由。当Auth0回调到你的应用时，服务器可能找不到对应的后端路由，直接返回404。解决办法是在Express服务器里添加一个兜底路由，把所有非API请求转发到前端的index.html：

  const path = require('path');
  // 先定义所有API路由...
  // 然后添加兜底路由
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
  });
  

  注意这里的路径要对应你Heroku上build后的前端文件位置，本地和生产环境的路径可能有差异，别写错了。

• 确认Auth0回调URL的细节
  虽然你说已经替换了localhost，但还是要再仔细核对：

  • 有没有不小心保留了本地的端口号？比如https://your-app.herokuapp.com:3000/callback，Heroku应用默认用443端口，不需要加端口。
  • 路径大小写是否一致？比如本地用/callback，但Auth0里配成了/Callback，Heroku的服务器对URL大小写是敏感的。
  • 有没有漏掉HTTPS？Auth0要求回调URL必须是HTTPS，Heroku的应用默认提供HTTPS，但要确保你配置的URL是https://开头，不是http://。

• 核对Heroku的环境变量
  别只看Auth0后台的配置，Heroku上的环境变量也很容易出错：

  • 去Heroku应用的Settings > Config Vars里，检查AUTH0_CALLBACK_URL、AUTH0_DOMAIN这些变量的值是不是生产环境的，有没有复制粘贴时多了空格或者斜杠？
  • 确认NODE_ENV设置成了production，有些配置会根据环境变量切换行为。

• 强制HTTPS访问
  Heroku会通过x-forwarded-proto头来标识请求是否是HTTPS，如果你的应用没有处理这个，可能会导致Auth0回调时出现协议不匹配的问题。可以在Express里加个中间件强制HTTPS：

  if (process.env.NODE_ENV === 'production') {
    app.use((req, res, next) => {
      if (req.header('x-forwarded-proto') !== 'https') {
        res.redirect(`https://${req.header('host')}${req.url}`);
      } else {
        next();
      }
    });
  }
  

先从这几个方向排查，我当时是路由重写没配置好导致的，希望你能顺利解决！

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