React not showing POST response from FastAPI backend application

Question

I have a simple React Ui which is supposed to get a json file from localhost:8000/todo and create the Ui in localhost:3000. This is the desired output:

However, this is what I get:

So, the two lines which are "Read a book." and "Cycle around town." are not shown. These two lines are supposed to come from localhost:8000/todo which is a JSON type information. I feel like I can fetch the data from localhost:8000/todo, but I don't know how to show them in localhost:3000, which is my output.

Here is the function that I have for this:

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
  useEffect(() => {
    fetchTodos()
  }, [])
  return (
    <TodosContext.Provider value={{todos, fetchTodos}}>
      <AddTodo />  
      <Stack spacing={5}>
        {todos.map((todo) => (
          <b>{todo.item}</b>
        ))}
      </Stack>
    </TodosContext.Provider>
  )
}

{todos.item} is the part that is supposed to print the items, but it doesn't!

Here is the console log info:

Here is the response from localhost:8000/todo:

Please let me know if you need more information.

When you console.log todos.data, what does the data look like? — Dylan Lee, Apr 08 '22 at 20:31
@Giorgi_Mdivani it doesn't change anything when I change it to todo.item. — CFD, Apr 08 '22 at 20:34
@CFD add a console log and see what's actually returned for todos.data — Giorgi_Mdivani, Apr 08 '22 at 20:36
above setTodos(todos.data) just write console.log(todos.data); then check output in browser console — Giorgi_Mdivani, Apr 08 '22 at 20:37
@Giorgi_Mdivani added its screenshot to the main post. It seems like it's not able to fetch the data. — CFD, Apr 08 '22 at 20:45
I think you need to allow CORS from origin localhost:3000 in your API. It's an Node API? You can easily found tutorials about it. It is quite common CORS problem involving newly created API's. — Lucas Simões, Apr 08 '22 at 21:10
@LucasSimões All of these are based on this tutorial: https://testdriven.io/blog/fastapi-react/ Idk how did they get results with the same code! — CFD, Apr 08 '22 at 21:17
Try adding `"proxy": "http://localhost:8000"` at the beginning of your package-json in the react app. That solved for me some problems with CORS. — ask4you, Apr 08 '22 at 21:48
fetch("proxy" : "http://localhost:8000/todo") has syntax error. @ask4you — CFD, Apr 09 '22 at 13:06

Chris · Accepted Answer · 2023-03-17T18:16:55.900

You would need to enable CORS (Cross-Origin Resource Sharing) in the FastAPI backend. You can configure it in your FastAPI application using the CORSMiddleware.

Note

Origin

An origin is the combination of protocol (http, https), domain (myapp.com, localhost, localhost.tiangolo.com), and port (80, 443, 8080).

So, all these are different origins:

http://localhost

https://localhost

http://localhost:8080

Even if they are all in localhost, they use different protocols or ports, so, they are different "origins".

Example

Have a look at this related answer as well.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ["http://localhost:3000", "http://127.0.0.1:3000"]

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

Your answer is correct and everything working now. Thanks, Chris! — CFD, Apr 09 '22 at 13:54

React not showing POST response from FastAPI backend application

1 Answers1

Note

Origin

Example

Linked

Related