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

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.

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"

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.

1. 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)
  });
}

2. 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.

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"
    ]
}  }