Skip to content

How to correctly pass API requests to another backend server #248

Closed
@ripitrust

Description

@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

Activity

gaearon

gaearon commented on Jul 28, 2016

@gaearon
Contributor

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

ripitrust commented on Jul 28, 2016

@ripitrust
Author

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

gaearon commented on Jul 28, 2016

@gaearon
Contributor

👍 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

ripitrust commented on Jul 28, 2016

@ripitrust
Author

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

sergetoure09

sergetoure09 commented on Dec 5, 2017

@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

janechou24 commented on Jun 8, 2018

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

locked and limited conversation to collaborators on Jan 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @gaearon@ripitrust@janechou24@sergetoure09

        Issue actions

          How to correctly pass API requests to another backend server · Issue #248 · facebook/create-react-app