React JS POST http://localhost:8001/calcul net::ERR_CONNECTION_REFUSED - Back end Fastapi

Question

I have a website developed in react js on the front end. The front makes a request (POST method) to a fastapi python back end. On the web interface, when I click on the sent button which calls the fastapi API, there is the following error:

on my local computer, everything is working fine. But when I do the production on an o2switch server, the above bug comes back.

For react js, I use axios to do the POST request:

Axios.post("http://localhost:8001/calcul", { 
        localisation: "MA",
        critere_priviligier: "12",
        largeur_lame: "12", espace_lame: "12"
    )
    .then(res => {
        console.log("1111", res.data);
        console.log(res)
        navigate('/response', {state: {localisation: res.data.autonomie_luminere,
                                       coefficient_cm: res.data.coefficient_cm,
                                       consommation_anuelle: res.data.consommation_anuelle,
                                       information: res.data.information,
                                       optimise: res.data.optimise}});
     
    }).
    then(function(json) {
        console.log("JSON: ", json);
    })
    .catch(error => console.error(`Error, ${error}`));

On fastapi, I took into account the CORS:

    from fastapi import FastAPI, Request
    from fastapi.middleware.cors import CORSMiddleware
    from calcul import Calcul, CoefficientCM
    import pandas as pd

   app = FastAPI()

   origins = ["*"]

   app.add_middleware(
       CORSMiddleware,
       allow_origins=origins,
       allow_credentials=True,
       allow_methods=["*"],
       allow_headers=["*"],
   )

For prod, I use build folder:

npm run build

And for fastapi I use uvicorn:

uvicorn main:app --host 0.0.0.0 --port 8001 --reload

As I mentioned before, everything works fine locally. But it's when I put in production on an o2switch server that there is this bug.

Fastapi and react js are in the same server

Are you changing the URL you're making the request to to match the URL of where your app is hosted in production? localhost refers to your own computer (i.e. the computer where the browser is running - that's probably not where you've hosted the API in production). — MatsLindh
– MatsLindh, Commented Nov 10, 2022 at 12:46
In fact, my fastapi and the react js app are hosted in the same server in production. That's why I made localhost — Shrmn
– Shrmn, Commented Nov 10, 2022 at 12:55
Yes, but localhost refers to the localhost for your browser. Not the same host as the frontend code is delivered from. — MatsLindh
– MatsLindh, Commented Nov 10, 2022 at 13:05
so I have to put the external url of the server but not of the localhost? — Shrmn
– Shrmn, Commented Nov 10, 2022 at 13:10
Yes, you have to use the actual URL of your service - i.e. where it can be reached on the internet. Usually you replace this in your build process when building the frontend, having one URL for local development and another URL when building for production (through environment variables or other means - exactly how depends on how you're building your production bundle. — MatsLindh
– MatsLindh, Commented Nov 10, 2022 at 14:14

Nedim · Accepted Answer · 2022-11-10 12:48:03Z

1

Replace your API_URL from localhost to URL you have on production

answered Nov 10, 2022 at 12:48

Nedim

1971 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React JS POST http://localhost:8001/calcul net::ERR_CONNECTION_REFUSED - Back end Fastapi

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related