I have a very simple app running on a webserver. A bit of Javascript requests some data from a FastAPI service. When I visit the domain I get the following error in the console GET http://0.0.0.0:8000/ net::ERR_CONNECTION_REFUSED.
If I ssh into the webserver, I can curl localhost:8000/ and get the data.
So the webpage exists and the backend service is running. But the frontend isn't reaching the backend. Could someone explain what I am doing wrong here?
<html>
<head></head>
<body>
<h1>RSS Reader</h1>
<ul id="feeds_list"></ul>
</body>
<script>
const ul = document.getElementById("feeds_list");
const data = fetch("http://127.0.0.1:8000/", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
mode: "cors",
})
.then((data) => {
return data.json();
})
.then((res) => {
res.forEach((element) => {
const li = document.createElement("li");
const a = document.createElement("a");
a.appendChild(document.createTextNode(element.title));
a.href = element.link;
a.setAttribute("target", "_blank");
li.appendChild(a);
ul.appendChild(li);
});
});
</script>
</html>
import json
from pathlib import Path
import pandas as pd
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
PARENT_DIR = Path(__file__).parent.parent.resolve()
app = FastAPI()
app.add_middleware(
CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"]
)
@app.get("/ping")
def ping():
return {"ping": "pong"}
@app.get("/")
def root():
df = pd.read_csv(f"{PARENT_DIR}/data/latest.csv")
df.to_json(f"{PARENT_DIR}/data/latest.json", orient="records")
with open(f"{PARENT_DIR}/data/latest.json") as f:
data = json.load(f)
return data
if __name__ == "__main__":
app()