MERN Stack - Экспресс и Реакция на одном порту? - PullRequest
Новая
       11

MERN Stack - Экспресс и Реакция на одном порту?

0 голосов
/ 29 мая 2018

Я работаю над проектом со стеком MERN (MongoDB, Express, React, Node), и у меня возникают проблемы при публикации данных из формы в компоненте React на конечную точку API, определенную в Node.js.Когда я отправляю форму, браузер просто показывает ошибку COST.Я вполне уверен, что если я создам обработчик событий для формы, отправляемой в React, и обрабатываю POST, используя библиотеку, такую ​​как Axios, я мог бы обойти эту проблему.

Но в конечном итоге я считаю, что проблема заключается в том, чтосерверный узел Node работает на другом порту внешнего интерфейса React.Есть ли способ настроить мой стек так, чтобы я мог использовать стандартную форму POST и, возможно, FE и BE работали на одном и том же порту?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Я вижу, что у вас запущенный CRA.Это означает, что когда вы запускаете npm run start из папки create-реагировать на приложение, вы должны иметь реакцию на порт 3000, порт по умолчанию.

Сначала я бы порекомендовал хранить ваш серверный и клиентский код в отдельной папке.с отдельными файлами package.json

Теперь предположим, что у вас есть этот код в /server/index.js Это прямо из экспресс-примера, но маршрут начинается с /api и также будет работать на порту 5000.Это очень важно, и вы поймете, почему через минуту. 

const express = require('express');
const app = express();

app.get('/api/hello', (req, res) => res.send('Hello World!'))

app.listen(5000, () => console.log('Example app listening on port 5000!'))

Теперь вернитесь в вашу папку /client, где я буду считать, что ваш CRA, откройте package.json и добавьте следующие строки: 

"proxy": {
  "/api/*": {
    "target": "http://localhost:5000"
  }
},

Попробуйте сейчас сделать вызов, чтобы сервер реагировал с axios, например: 

const helloFromApi = 
  axios
    .get('/api/hello')
    .then(res => res.data);

Надеюсь, это поможет

0 голосов
/ 30 мая 2018

Для разработки добавьте следующую строку в файл package.json 

"proxy": "http://localhost:{your API port}/"

Для производства вы можете настроить прокси в приложении (Express, Nginx, ...), которое будет обслуживать ваши статические файлы (приложение React), стили и т. д.).Обычно используется маска "/ api /" для определения запроса API.

...