Запрос на получение GET-реакции фляжки не удается, но POST-запрос успешен

голоса
0

Я немного новичок, чтобы реагировать. Я разработал бэкэнд фляжки и теперь хочу объединить его с React для фронтэнда.

Я использую fetchв Реакции, чтобы сделать GET-запрос. Когда я читаю данные, текст или ответ при вызове response.text()- это index.htmlфайл в publicкаталоге моего приложения

Вот мой код реакции:

componentDidMount() {
    fetch('/')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }

Вот MRE моего приложения для фляжки:

@app.route('/')
def index():
    return {'snippets':['blah','blaha']

Мой прокси в package.json

    proxy: http://127.0.0.1:5000/

Мой бэкэнд фляжки работает на порту 5000 и реагирует на порт 3000

Следует отметить, что POST-запрос (от <form>) действительно проксируется на бэкенд-сервер, и я могу получить содержимое POST-запроса во флэске. Это GET-запрос, fetchкоторый не работает.

Структура каталога:

-env
-getcode
  -templates
  -static
  -__init__.py
  -routes.py
-getcode-client
  -src
  -public
run.py

Здесь getcodeнаходится каталог приложения для работы с фляжками, в котором getcode-clientсодержится приложение React, созданное с использованием create-react-app

ПРИМЕЧАНИЕ: Также я пытался настроить прокси-сервер вручную: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

но теперь реагирующее приложение не показывается. Оно полностью показывает выход Джсона на бэкэнде моей фляжки

Задан 12/05/2020 в 12:30
источник пользователем
На других языках...                            


2 ответов

голоса
0

Так как вы используете CRA, я бы посоветовал использовать их настройки прокси.

Чтобы сообщить серверу разработки о проксировании любых неизвестных запросов к вашему API серверу в разработке, добавьте поле прокси к вашему package.json, например:

"proxy": "http://localhost:4000",

В вашем случае это будет на порту 5000.

Подробнее на эту тему.

Однако на производстве я бы предложил использовать nginx или apache, чтобы избежать проблем в будущем.

Ответил 15/05/2020 в 10:57
источник пользователем

голоса
0

Я не уверен, но думаю, что проблема в том, что вы используете и React и Flask на локальном хосте, и не указываете порт в fetchзапросах, попробуйте это:

componentDidMount() {
    fetch('/:5000')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }
Ответил 15/05/2020 в 10:49
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more