Heroku节点+反应应用程序：未处理的锚标记身份验证请求

Posted 2023-03-07

【中文标题】Heroku节点+反应应用程序：未处理的锚标记身份验证请求

【英文标题】：Heroku node + react app: anchor tag auth request unhandled

【发布时间】：2018-03-10 00:33:38

【问题描述】：

我正在构建一个 node + express 服务器，前端带有 create-react-app。 我使用 passportjs 进行身份验证路由处理，所有东西都在 localhost 上运行（后端在端口 5000 上，前端在端口 3000 上，带有代理）。 当我部署到 Heroku 时，似乎服务器无法识别我的身份验证路由，因此 heroku 提供静态 index.html。 如果我用 Postman 测试我的 API 似乎一切正常（我可以看到 google oauth 的 html 页面），但是在我的反应应用程序中使用锚标记或在 url 中手动编写端点，我只能看到相同的页面重新加载。

我的服务器 index.js：

const express = require('express')
const passport = require('passport')
const mongoose = require('mongoose')
const path = require('path')

// KEYS
const keys = require('./config/keys')

// MONGOOSE MODELS
require('./models/User')

mongoose.connect(keys.mongoURI)

// PASSPORT SETUP
require('./config/passport')

// CREATE THE SERVER
const app = express()

// EXTERNAL MIDDLEWARES
require('./middlewares/external')(app)

// ROUTE HANDLERS
require('./routes/authRoutes')(app)

// PRODUCTION SETUP
if (process.env.NODE_ENV === 'production') 
  // express serve up production assets ( main.js, main.css )
  app.use(express.static('client/build'))
  app.get('*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  )


// START THE SERVER
const PORT = process.env.PORT || 5000
app.listen(PORT)

流程：

本地主机： react 应用程序启动 -> 我点击 'Google Login' -> GET request to "/auth/google" -> google oauth flow -> 重定向到 "/" 并且我的 react 应用程序重新出现，用户已登录。

HEROKU： 在 my-app.herokuapp.com/ 上反应应用程序 -> 点击“Google 登录” -> 页面重新加载，没有任何反应。用户未登录。

请大家帮帮我。 谢谢

【问题讨论】：

在执行 heroku logs --tail 时，您是否看到任何来自 heroku 的错误？

没有错误，似乎一切正常

我认为使用 Oauth 在他们的仪表板中有一个“重定向到的授权 URL”列表。你有重定向到那里列出的网址吗？我认为这就是他们用来重定向回您的应用的方法

我也这么认为，但是如果我用 Postman 测试我的“/auth/google” api 端点，我可以看到 google 登录 html 页面。如果有一个“授权的 URL 重定向到”，谷歌会在登录后告诉我，并带有正确的错误页面。

@DarioIelardi 似乎您遵循了 Stephen Grider 的教程，因为我遇到了同样的问题。您是否以某种方式解决了问题？

【参考方案1】：

这是默认安装 Service Worker 以使您的应用成为 Progressive Web App 的结果

要确定这是否对您来说是个问题，请在隐身模式下测试您的 heroku 生产模式应用。对 /auth/google 的请求现在应该到达服务器并像在开发中一样运行。

一旦你确定这是一个问题，你可以删除

import registerServiceWorker from "./registerServiceWorker";

来自您的 /client/src/index.js 文件。

您的浏览器缓存可能已经包含已安装的 Service Worker，因此您可能必须这样做

清除用户浏览器上的浏览器缓存

以编程方式卸载服务器工作者

import  unregister  from './registerServiceWorker';
....
unregister();

【讨论】：

非常感谢。它解决了我上周试图修复的一个错误。

【参考方案2】：

我有同样的问题，症状完全相同。

对我来说，原因是键中的拼写错误：在 server/config/prod.js 中，我有一行阅读 cookieKey: process.env.COOKIE_KEY，但在 Heroku 配置变量中，该变量被命名为 cookieKey。在 Heroku 中将其重命名为 COOKIE_KEY 解决了这个问题。

【参考方案3】：

如果您已按照 Stephen Grider 教程进行操作，我想知道一件事：您的 passport.js 文件是在配置还是服务中？我看到你在 index.js 中写过：require('./config/passport') 而我在 index.js 中的是require('./services/passport')

可能不是您在生产中挂起的 google oauth 流程的解决方案，但可能会有所帮助。