Webpack реагирует на прокси приложения на экспресс-сервере.Возврат ответа JSON от экспресс-сервера вместо реакции компонентов

Question

У меня есть реагирующее веб-приложение, которое использует экспресс в качестве внутреннего сервера.

У меня настроено так, чтобы оно передавало URL-адреса запросов на порт реагирующего сервера (9000) на сервер экспресс-обслуживания (3000).Проблема в том, что когда я набираю путь / examplepath, он возвращает json, который возвращает приложение express, вместо того, чтобы возвращать компонент, который отображается при получении этого ответа от бэкэнда.Я получаю экспресс-ответ и смотрю на него, а не реагирую, получаю экспресс-ответ и смотрю на него, а затем отрисовываю и показываю мне этот отрисовку.

Когда я нажимаю эту кнопку, она отображает правильную страницупотому что он использует этот код

componentDidMount() {
    axios.post('/', qs.stringify(this.state))
    .then(res => {
      if (res.data === "session") {
        this.setState({session: true})
      }
    })
  }

Он будет правильно отображать страницу с помощью реакции

Но если я приеду непосредственно на маршрут, он выдаст ответ json отэкспресс-бэкэнд. Вот так

Когда я хочу, чтобы он отображался как правильно отредактированный, используя response

  devServer: {
    port: 9000,
    open: true,
    proxy: {
      '/': 'http://localhost:3000'
    }
  }

ЭТО ^ - это мой webpack.config.js

Answer 1

Попробуйте добавить historyApiFallback: true к вашему webpack.config.js файлу (не уверен, что прокси-сервер с ним будет связываться - если это так, используйте взамен промежуточное ПО * cors на бэкэнде):

devServer: {
    host: 'localhost',
    port: 9000,
    quiet: true,
    historyApiFallback: true,
  },

Кроме того, более распространенной настройкой порта является: приложение React на 3000 и API / сервер на 5000.

Кроме того, убедитесь, что вы четко разделяете свои передний и задний маршруты.Попробуйте сохранить свои внутренние маршруты на /api/someurl и добавить их к своему прокси (и AJAX запросам):

proxy: {
      '/api/*': 'http://localhost:3000/api/'
    }

Тогда все внешние запросы будут:

axios.get('/api/someurl').then().catch()

, которое разрешится до http://localhost:3000/api/someurl.Таким образом, нет никакого шанса смешать внешние и внутренние маршруты.

Лично я бы порекомендовал cors вместо proxy, потому что прокси-сервер, как было известно, вызывал случайные проблемы с подключением.