How to correctly pass API requests to another backend server

[ripitrust]

Hi Team

1. I have a backend python (flask) server running at localhost:5000, which provides API calls with json data
2. Now I have the create-react-app running at localhost:3000, how should I pass the api calls back to localhost:3000?
3. Previously, I use "proxy" option in the webpack-dev-server, but now I am not sure how to do it with create-react-app, do I absolutely have to eject it?

Thanks so much for the answer

[gaearon]

We are discussing this in #147.
Can you show the proxy configuration you were using?
Also, is there a big reason why you can’t just embed http://localhost:5000 in your requests?

[ripitrust]

Hi @gaearon

Thanks so much for your reply

the devServer setting I used previously is

devServer: {
        contentBase: './js/dist',
        proxy: {
            "/api/*":{
                target:"http://localhost:5000/",
                secure:"false"
            },
            "/users" :{
               target:"http://localhost:5000/", 
               secure:"false" 
            }
        },
        hot:true,
        historyApiFallback: true,
        port:3000 // this is the webpack-dev-server port
  },

About your question
I am not sure if I am right , but if I want to fire a api request from a client served at localhost:3000 to a backend server listening at localhost:5000, I have to make the api request CORS compatible, right?
I think this will cause some problem

also, it means that in all my fetch(url) calls, I have to specifically put a complete url
fetch('http://localhost:5000/api').then()
instead of the api endpoint
fetch('/api').then()

[gaearon]

👍 Thanks for explaining. I’ll close this in favor of #147 but I’ll make sure to revisit your use case when we work on this.

[ripitrust]

Thanks Dan,
great, I will also look at #147 and see if it helps

[sergetoure09]

Hi @ripitrust
I think i have the same issue like you.I have my backend in python listening on port 8080 and i have used npm run build to create bundle.js.I use fetch to request json data from my backend API

componentDidMount(){
    var url="http://localhost:8080/"
    fetch(url).then(function(response){
        return response.json();
    }).then(function(data){
      this.update(data)
    });

and my update function is like this

 update(state){
    this.setState({
      first_name:state.last_name,
      last_name:state.last_name,
      position:state.position,
      avatar:{
        img:state.img,
        width:state.avatar.width,
        height:state.avatar.height},

      bio:state.bio,
      age:state.age
    })
  }

But i have a service workers NOT found issue when launhing my app.
Anyone can help?

[janechou24]

Actually you could connect your react and flask in one step, just copy your react html file and bundle.js inside the public folder and put it inside the flask static folder, but pay attention about the relative path of the bundle.js, then if you run the flask again, you could see your react server. Hope that will help.