React 不显示来自 FastAPI 后端应用程序的 POST 响应

Question

我有一个简单的 React Ui，它应该从中获取 json 文件localhost:8000/todo并在localhost:3000. 这是所需的输出：

然而，这就是我得到的：

所以，这两行是“读一本书”。和“骑自行车环城”。没有显示。这两行应该来自localhost:8000/todo类型JSON信息。我觉得我可以从 获取数据localhost:8000/todo，但我不知道如何在 中显示它们localhost:3000，这是我的输出。

这是我为此提供的功能：

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}是应该打印项目的部分，但它没有！

这是控制台日志信息：

以下是 的回复localhost:8000/todo：

如果您需要更多信息，请告诉我。

Answer 1

您需要在 FastAPI 后端启用CORS（跨域资源共享） 。您可以使用 .FastAPI 应用程序在 FastAPI 应用程序中配置它CORSMiddleware。

笔记

起源

http源是协议 ( , https)、域 ( myapp.com, localhost, localhost.tiangolo.com) 和端口 ( 80, 443, )的组合8080。

所以，所有这些都是不同的起源：

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

即使它们都在localhost，但它们使用不同的协议或端口，因此，它们是不同的“起源”。

例子

也看看这个相关的答案。

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