응답이 Fast의 POST 응답을 표시하지 않음API 백엔드 애플리케이션

응답이 Fast의 POST 응답을 표시하지 않음API 백엔드 애플리케이션

나는 json 파일을 가져와 에서 Ui를 만드는 간단한 React Ui를 가지고 있다. 다음은 원하는 출력입니다:

하지만, 저는 다음과 같이 이해합니다:

그래서, "책을 읽어라."와 "마을을 자전거로 돌아라."라는 두 줄은 표시되지 않는다. 이 두 줄은 형식 정보에서 나온 것으로 되어 있습니다. 에서 데이터를 가져올 수 있을 것 같은 느낌이 들지만, 어떻게 표시해야 할지 모르겠습니다. 이것은 제 출력입니다.

이를 위한 기능은 다음과 같습니다:

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>
  )
}

항목을 인쇄해야 하는 부분이지만, 인쇄되지 않습니다!

콘솔 로그 정보는 다음과 같습니다:

다음의 응답은 다음과 같습니다:

더 필요한 정보가 있으면 알려주세요.

---

Fast에서 를 활성화해야 합니다API 백엔드. Fast에서 구성할 수 있습니다를 사용하는 API 응용 프로그램입니다.

메모

기원.

오리진은 프로토콜(, ), 도메인(, ), 포트(, )의 조합이다.

그래서:

• http://localhost
• https://localhost
• http://localhost:8080

이들은 모두 에 있더라도 서로 다른 프로토콜이나 포트를 사용하므로 서로 다른 "원점"입니다.

예

이것도 한번 보세요.

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=["*"],
)