Почему webpack-dev-server не использует прокси-вызовы API в приложении React? Возвращение 404 - PullRequest
Новая
       5

Почему webpack-dev-server не использует прокси-вызовы API в приложении React? Возвращение 404

0 голосов
/ 04 апреля 2020

Я создаю полнофункциональное приложение React с базой данных Postgres, подключенной через Express / Node. Я не использую приложение create-реагировать. Чтобы проверить вызовы API, я вызываю API в componentDidMount() с топором ios. Сервер работает на порту 3000, а приложение реакции работает на порту 8080. Я проверил конечную точку /users в Postman, чтобы убедиться, что она работает. 

componentDidMount() {
    // failing config for webpack dev server:
  axios.get('/api/users')
  .then((response) => {
    console.log(response)
  })
  .catch((err) => {
    console.log(err);
    console.log(err.response)
  })
  // fails:
  // axios.get('/users')
  // .then((response) => {
  //   console.log(response)
  // })
  // .catch((err) => {
  //   console.log(err);
  //   console.log(err.response)
  // })

  // works fine:
  // axios.get('http://localhost:3000/users')
  // .then((response) => {
  //   console.log(response)
  // })
  // .catch((err) => {
  //   console.log(err)
  // })
}

Обратите внимание, что вызов localhost:3000 напрямую работает, но я хочу иметь возможность вызвать /users для подготовки к производству. окружающая обстановка. Поэтому я добавил следующее в мой файл webpack.config. js: 

  devServer: {
 contentBase: __dirname,
 hot: true,
 historyApiFallback: true,
 open: true,
 proxy: {
  '/api': 'http://localhost:3000',
  changeOrigin: true
  }
}

Что еще нужно добавить для прокси-вызовов API при запуске webpack-dev-server? Из обучающих программ, которые я видел, достаточно иметь конфигурацию прокси в webpack.config.js, но я получаю только 404 с.

Заранее спасибо.

1 Ответ

0 голосов
/ 05 апреля 2020

Решение, по крайней мере для меня, заключалось в использовании переменных среды реагирования, которые будут динамически определять URL, на который нужно указать. Я следовал этому уроку: https://medium.com/@trekinbami / using-environment-variable-in-Reaction-6b0a99d83cf5 . Просто укажите свой dev env на localhost, а затем на любой порт вашего сервера.

...