Reação do frasco O pedido de GET está falhando mas o pedido de POST é bem sucedido

Question

Reação do frasco O pedido de GET está falhando mas o pedido de POST é bem sucedido

votos

22

Eu sou um pouco principiante a reagir. Desenvolvi um Flask backend e agora quero emparelhá-lo com o React para o frontend.

Eu estou usando fetchem Reagir para fazer o Pedido de GET. Quando eu leio os dados, o texto ou a resposta quando eu chamo response.text()é o index.htmlarquivo no publicdiretório do meu aplicativo

Aqui está o meu código de reacção:

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)
      })
  }

Aqui está o MRE da minha aplicação do frasco:

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

O meu proxy em package.json

    proxy: http://127.0.0.1:5000/

O backend do meu frasco está a funcionar na porta 5000 e reage na porta 3000

Uma coisa a notar é que um pedido POST (de <form>) é enviado para o servidor back end e eu posso recuperar o conteúdo do pedido POST no frasco. É o pedido de GET usando fetchisso não está funcionando.

Estrutura do diretório:

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

Aqui getcodeestá o diretório do aplicativo do frasco e getcode-clientcontém o aplicativo React criado usando create-react-app

NOTA: Também tentei configurar um proxy manual como este: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

mas agora a aplicação de reacção não é mostrada. Mostra completamente a saída do meu frasco do fundo do json

python reactjs flask fetch

Publicado 12/05/2020 em 12:30
fonte usuário Code Yard

Em outras línguas...

2 respostas

Damian Busz · Answer 1 · 2020-05-15 10:57

Como você está usando CRA, eu sugeriria usar a configuração de proxy deles.

Para dizer ao servidor de desenvolvimento para proxy quaisquer pedidos desconhecidos ao seu servidor API em desenvolvimento, adicione um campo proxy ao seu package.json, por exemplo:

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

No seu caso, este estará na porta 5000.

Aqui está mais sobre o tópico.

No entanto, na produção eu sugeriria o uso de nginx ou apache para evitar problemas no futuro.

Dex · Answer 2 · 2020-05-15 10:49

votos

0

Eu não tenho certeza, mas eu acho que o problema é que você usando React e Flask no localhost, e não especificando o porto nos fetchpedidos, tente isto:

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)
      })
  }

Respondeu 15/05/2020 em 10:49
fonte usuário Dex