Я работаю над приложением, использующим интерфейс React и экспресс-бэкэнд, с настройкой GraphQL через Apollo (я следую и изменяю учебное пособие https://www.youtube.com/playlist?list=PLN3n1USn4xlkdRlq3VZ1sT6SGW0-yajjL)
В настоящее время я пытаюсь выполнить развертывание, и я делаю это с HerokuВсе прекрасно работает на моем локальном компьютере до развертывания и в Heroku в Google Chrome. Однако я получаю вышеупомянутые ошибки в Safari и Firefox соответственно. Интересно, почему это происходит в этих браузерах и как это исправить.
Я потратил около 10 часов на изучение этого вопроса. Вещи, которые я пробовал, не имели никакого значения:
- Я пытался добавить CORS в свой экспресс-бэкэнд
- Я пытался обслуживать конечную точку graphql как HTTPS
- Перемещение app.use (express.static) в основной файл сервера app.js
Я не мог найти много других вещей, которые можно было попробовать. Везде, где я смотрел, казалось, говорилось, что CORSУстранена проблема, но моя проблема сохраняется.
Ссылка на Github: https://github.com/LucaProvencal/thedrumroom Приложение Live Heroku: https://powerful -shore-83650.herokuapp.com/
App.js (экспресс-бэкэнд):
const cors = require('cors')
// const fs = require('fs')
// const https = require('https')
// const http = require('http')
app.use(express.static(path.join(__dirname, 'client/build')));
app.use(cors('*')); //NEXT TRY app.use(cors('/login')) etc...
app.use(cors('/*'));
app.use(cors('/'));
app.use(cors('/register'));
app.use(cors('/login'));
app.get('/login', (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
app.get('/register', (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
server.applyMiddleware({ app }); // app is from the existing express app. allows apollo server to run on same listen command as app
const portVar = (process.env.PORT || 3001) // portVar cuz idk if it will screw with down low here im tired of dis
models.sequelize.sync(/*{ force: true }*/).then(() => { // syncs sequelize models to postgres, then since async call starts the server after
app.listen({ port: portVar }, () =>
console.log(`? ApolloServer ready at http://localhost:3001${server.graphqlPath}`)
)
app.on('error', onError);
app.on('listening', onListening);
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Полный файл находится на Github, я пытался опубликовать только соответствующие части выше.
Ожидаемый результат - он работает во всех браузерах.Из моего исследования видно, что поскольку Heroku работает по протоколу HTTPS, Safari и Firefox не разрешают запросы к HTTP (где находится сервер graphql, http://localhost:3001/graphql'). Когда я пытался обслуживать Apollo по HTTPS, Heroku просто зависал, даваямне ошибки H13 и 503.
Спасибо за любую помощь ...