Heroku Node + React App:未处理锚标记身份验证请求 [英] Heroku node + react app: anchor tag auth request unhandled

问题描述

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

I'm building a node + express server, with create-react-app to the frontend. I used passportjs for auth routes handling, and all the stuff totally working on localhost ( backend on port 5000 and frontend on port 3000, with a proxy ). When I deploy to Heroku, seems like the server can't recognize my auth routes and so heroku serve up static index.html. If I test my APIs with Postman all seems to work ( I can see the html page for google oauth ), but with an anchor tag in my react app or manually writing the endpoint in the url, I can see only the same page reloading.

我的服务器index.js:

My server 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 app启动->我单击"Google登录"-> GET请求到"/auth/google"->谷歌oauth流->重定向到"/"，我的react app重新出现，用户已登录.

LOCALHOST: react app starts -> I click 'Google Login' -> GET request to "/auth/google" -> google oauth flow -> redirect to "/" and my react app reappears, the user is logged in.

HEROKU: 在my-app.herokuapp.com/上反应应用程序->单击"Google登录"->页面重新加载，没有任何反应.用户尚未登录.

HEROKU: react app on my-app.herokuapp.com/ -> click on "Google Login" -> the page reloads, nothing happens. the user is not logged in.

请大家帮帮我. 谢谢

推荐答案

这是由于默认情况下安装了服务工作者以使您的应用成为

This is a result of the service worker being installed by default to make your app a Progressive Web App

要确定这是否对您有问题，请在隐身模式下测试您的heroku生产模式应用程序.现在，对/auth/google的请求应该可以到达服务器，并且行为与开发中的行为相同.

To determine if this is an issue for you, test your heroku production mode app in incognito mode. The request for /auth/google should now reach the server and behave as it does in development.

确定是问题后，就可以删除

Once you determine it is an issue, you can remove the

import registerServiceWorker from "./registerServiceWorker";

从您的/client/src/index.js文件中.

from your /client/src/index.js file.

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

You browser cache may already contain an installed service worker so you may have to

1. 在用户浏览器上清除浏览器缓存

2. 以编程方式卸载服务器辅助程序

1. clear browser cache on a user browsers

2. uninstall the server worker programmatically

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

这篇关于Heroku Node + React App:未处理锚标记身份验证请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！