Как подружить React и Бэкенд часть на Node.js?

Question

[AlexNoch]

Только начал разрабатывать приложения, никак не соображу. Как связать frontend - на React и сервер на Node.js?
Удалённо - купил VPS, настроил, выложил node.js , запустил. С браузера открыл своё React приложение, отправил AJAX запрос, и я получил ответ с своего сервера. Окей. А как мне простите разрабатывать все локально? Я запустил приложение npm node app.js на 8000 порту. Запускаю своё реакт приложение через npm start, оно открывается на 3000 порту. Но Ajax запросы не получают никакого ответа. Пробовал выставлять заголовки "Content-Type": "application/json",
"Access-Control-Allow-Origin":"*" , на удаленном сервере это дало результат. Локально , не дало. Как разрабатывать локально ?

Answer 1

[Денис Юрьев]

Как же сильно я (не) люблю эти вопросы про node.js и порты.

Ставите себе nginx на локалхост который роутит правильно запросы с 80 порта до 3000 или 8000 порта в зависимости от запроса и живете себе радуетесь.

Как правильно? да так же как VPS вы настраивали.

Comments

[AlexNoch]

Спасибо за ответ, Попробую ))

[Денис Юрьев]

AlexNoch, при локальной разработке вы в идеале должны локально развернуть среду максимально идентичную среде на сервере, где все это будет работать. Нынче это с помощью докера модно реализовывать)

[Robur]

Денис Юрьев, поднимать локально докер просто чтобы запустить ноду - такая себе идея.
Учитывая что это разработка, и там по сто раз надо сервер обновлять - перезапускать.

[Денис Юрьев]

Robur, если среда разработки с докером дружит, то задача упрощается до нельзя. Сам же контейнер перезапускать не надо, только ноду

[Robur]

Денис Юрьев, вопрос только - зачем упрощать ненужное.

[Денис Юрьев]

Robur, ну если работа в команде и в команде юзают разные ОС (вспоминаем регистронезависимые фс), разный уровень понимания работы серверного стека, умение все это настроить.

Проще все свести к докеру.

[Robur]

Денис Юрьев, вы же понимаете что это не тот случай и тут нет команды, разных ОС, и всего остального? или нет? или понимаете, но считаете что хорошее решение хорошо всегда, везде и в любой ситуации, и если лично вам что-то проще, то и всем вокруг, в любой ситуации, в том числе и автору данного вопроса это тоже будет проще, даже если автор не то что докер развернуть как среду разработки, или nginx поднять как прокси а даже понять проходит у него запрос или нет, пока не в состоянии?

[AlexNoch]

@Roburс с чего вы взяли что я, не в состоянии понять проходит мой запрос или нет? В networks Есть ответ что не хватает CORS заголовка от сервера. Хотя сервер дал доступ и отослал заголовок. - Это локально. Тоже самое было и на VPS , но решилось после установки соответствующих заголовков. Сейчас, я настроил Nginx локально, запустил ноду , обращаюсь из моего приложения React , отсылая Ajax запросы, получаю в ответ JSON и все работает замечательно. Хотя, было так не сразу, пришлось очистить кэш браузера и пару раз перезапустить сервер... Так что все в порядке.

Answer 2

[Robur]

Но Ajax запросы не получают никакого ответа.

нет такой ошибки "никакого ответа"
Либо запрос идет не туда, либо сервер не запускается.

никакой сложности тут вообще нет - включаете на сервере в ноде cors, и запускаете реакт и сервер на каких угодно портах.
То что у вас что-то не работает, значит только что вы сделали что-то не так.

проверьте что сервер запускается и доступен на 3000 порту для начала, хотя бы curl или postman, или просто в браузере откройте этот url.

Answer 3

[AlexNoch]

Барабанная дробь , Решение!

http.createServer((req,res)=>{
    res.writeHead(200, {
        "Access-Control-Allow-Origin":"*",
        "Content-Type": "application/json",
        "Access-Control-Allow-Credentials":"true"
        });
    res.end(JSON.stringify({newName:"Hello World"}))
}).listen(3001);

Вся соль была в том, что заголовок отправлялся неправильно, из за одинарных кавычек, и двоеточия : Будьте внимательнее)