Flask + React GET Request is failing but POST Request is successful

Question

I am a bit of a beginner to React. I developed a Flask backend and now i want to pair it with React for frontend.

I am using fetch in React to make the GET Request. When i read the data, the text or the response when i call response.text() is the index.html file in the public directory of my app

Here is my react code:

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

Here is the MRE of my flask app:

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

My proxy in package.json

 "proxy": "http://127.0.0.1:5000/"

My flask backend is running at port 5000 and react at port 3000

One thing to note is that a POST request (from <form>) does get proxied to the backend server and i can retrieve the contents of the POST request in flask. Its the GET request using fetch that isn't working.

Directory structure:

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

Here getcode is the directory of the flask app and getcode-client contains the React app created using create-react-app

NOTE: Also i tried to setup a manual proxy like this: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

but now the react app is not shown. it completely shows my flask backend's json output.

Package.json:

{ "name": "getcode-client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "axios": "^0.19.2", "http-proxy-middleware": "^1.0.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

Maybe flask is serving some index.html file on / route, can you replace / with /api and try again. — Muhammad Ali
– Muhammad Ali, Commented May 15, 2020 at 8:05

Chih Sean Hsu · Accepted Answer · 2020-05-22 02:38:24Z

Latest update: Sorry about I misunderstood about proxy in nodejs, and fetch() can support this kind of proxy.

After I do some trial and error, you just need to change you path '/' to '/something_else' and the proxy work well.

@app.route('/test', methods=['GET', 'POST']) def index(): return {'snippets':['blah','blaha']}

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

Wrong information:

This is not issue about python and flask.

~~You use fetch() in javascript, and this is native js function, so it is not related with proxy you set in package.json.~~

If you want to use fetch() to get other port, you have to give it the whole url http://localhost:5000/ or you will get the same port of you react app.

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

There are some packages you can use like fetch-with-proxy or node-https-proxy-agent, fetch-with-proxy can get HTTP_PROXY env var to set proxy, and you can use the other create proxy agent.

But I recommend that to use other package to send request like axios.

import axios from 'axios'; const axios_ = axios.create({ baseURL: 'http://localhost:5000', headers: { 'Content-Type': 'application/json' }, }) class App extends React.Component { componentDidMount() { axios_.get('/') .then(response => { console.log(response.text()) //Here is the text() i said before this.setState({ snippets: response.data }) }) .catch(error => { console.log(error) }); } ...}

Actually, the proxy you mean is not the proxy we usually talk about, what you want to do is just to point to another port to get the response.

Proxy is about a tunnel or something between your client to server.

Further more, you also can search for reverse proxy that will be the question you want to know too.

So I know that you have to use nginx in production. Is there a way to use nginx reverse proxy in development. On my local machine??
After I search for more information, I misunderstanding for proxy in package.json . I think it is the nodejs proxy problem, it does not support root path '/'. If you change '/' to '/test' or other else in both fetch and flask route, it work.
I had tried that using /api in package.json but that also doesn't work
So in proxy in package.josn would be http;//localhost:5000/test
yea now it works. yes both servers are in debug mode auto reload works

Dex · Accepted Answer · 2020-05-15 08:58:59Z

I am not sure, but I think that the problem is that your using both React and Flask on localhost, and not specifying the port in the fetch requests, try this:

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

Or if that doesn't help, maybe change the proxy settings as:

"proxy": "127.0.0.1:5000"

The thing is that I don't want to type out localhost. I want fetch to proxy all the requests to my flask backend.
What about trying /:5000, that should proxy all requests through flask. and I would edit my answer.

random_number · Accepted Answer · 2020-05-22 00:59:35Z

I am also relatively new to react. Recently I wrote a flask API and was testing it with a react frontend. There are two things that i did differently to get things working.

My componentDidMount would look something like this using the docs

 componentDidMount() { fetch('/').then(response => { return response.text(); }).then(response => { this.setState({ snippets: response.data }) }).catch(error=>{ console.log(error) }); }

I use the flask_cors package to prevent CORS related issues. Implementation would be something like this

from flask_cors import cross_origin @cross_origin(origin="*") @app.route('/') def index(): return {'snippets':['blah','blaha']

I haven't made any changes to my package.json to get the connection between the React frontend and the flask api backend. Hope this helps and good luck with your troubleshooting.

Damian Busz · Accepted Answer · 2020-05-15 09:23:19Z

Since you are using CRA I would suggest to use their proxy setting.

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example:

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

In your case this will be on port 5000.

Here is more on the topic.

However, on production I would suggest to use nginx or apache to avoid issues in the future.

@Edit This is how package.json should look in your case

{ "name": "getcode-client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "axios": "^0.19.2", "http-proxy-middleware": "^1.0.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "proxy": "http://localhost:5000", "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

It should have, have you tried to restart application & have you put this in correct place in package.json? Could you perhaps past it to your main post? Entire package.json
The package.json is the normal one that gets created by create with the proxy added. Yes I have restarted the servers and even restarted the computer
Right, I just wanna be sure that you placed the proxy snippet in the correct place. Also it would be nice to see a picture from your developer console of how it proceeds the request.
Yeah but I dont see here the proxy snippet? I have edited my post, copy this as your new package.json and restart your react app, let me know how it went.

Collectives™ on Stack Overflow

Flask + React GET Request is failing but POST Request is successful

4 Answers 4

8 Comments

2 Comments

Comments

12 Comments

Hot Network Questions