Приложение Heroku + приложение реакции: необработанный запрос на привязку тега

Question

Я строю узел + экспресс-сервер, с созданием-реакции-приложения на внешний интерфейс. Я использовал passportjs для обработки маршрутов аутентификации, и все это полностью работало на локальном хосте (бэкэнд на порту 5000 и интерфейс на порте 3000 с прокси). При развертывании в Heroku сервер не может распознать мои маршруты аутентификации, и поэтому heroku предоставляет статический index.html. Если я тестирую свои API с помощью Postman, все, кажется, работает (я вижу html-страницу для google oauth), но с помощью тега привязки в моем приложении реакции или ручного написания конечной точки в 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)

Поток:

LOCALHOST: приложение реакции запускается -> я нажимаю "Логин Google" -> ПОЛУЧИТЬ запрос к "/auth/google" -> Google oauth flow -> перенаправить на "/", и мое приложение реакции появляется снова, пользователь вошел в систему.

HEROKU: отреагируйте на приложение my-app.herokuapp.com/ -> нажмите "Логин Google" -> страница перезагрузится, ничего не происходит. пользователь не авторизован.

Пожалуйста, ребята, помогите мне. Спасибо

Answer 1

Это результат установки сервисного работника по умолчанию, чтобы сделать ваше приложение прогрессивным веб-приложением.

Чтобы определить, является ли это проблемой для вас, протестируйте ваше приложение Heroku Production Mode в режиме инкогнито. Запрос на / auth / google должен теперь дойти до сервера и вести себя так же, как при разработке.

Как только вы решите, что это проблема, вы можете удалить

import registerServiceWorker from "./registerServiceWorker";

из вашего файла /client/src/index.js.

Кэш браузера может уже содержать установленный сервисный работник, поэтому вам, возможно, придется

1. очистить кеш браузера на пользователях браузеров

2. удалить сервер работника программно

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

Answer 2

У меня были те же проблемы с точно такими же симптомами.

Для меня причиной стала опечатка в ключах: в server/config/prod.js У меня было чтение строки cookieKey: process.env.COOKIE_KEY но в Heroku Config Variables эта переменная была названа cookieKey, Переименование его в COOKIE_KEY внутри Героку решил проблему.

Answer 3

Если вы следовали учебнику Стивена Гридера, мне интересно одно: находится ли ваш файл passport.js в конфигурации или службах? Я вижу, вы написали в index.js: require('./config/passport')тогда как мой в index.js есть require('./services/passport')

может не быть вашим решением проблемы зависания в процессе работы Google, но может помочь.