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

2024-12-31 08:37:00
admin
原创
39
摘要:问题描述:我有一个简单的 React Ui,它应该从中获取一个 json 文件localhost:8000/todo并在其中创建 Ui localhost:3000。这是所需的输出:然而,我得到的是这样的:因此,没有显示“Read a book.”和“Cycle around town.”这两行。这两行应该来...

问题描述:

我有一个简单的 React Ui,它应该从中获取一个 json 文件localhost:8000/todo并在其中创建 Ui localhost:3000。这是所需的输出:
在此处输入图片描述

然而,我得到的是这样的:
在此处输入图片描述

因此,没有显示“Read a book.”和“Cycle around town.”这两行。这两行应该来自,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
在此处输入图片描述

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


解决方案 1:

您需要在 FastAPI 后端启用CORS(跨源资源共享)。您可以使用 在 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=["*"],
)
相关推荐
  为什么项目管理通常仍然耗时且低效?您是否还在反复更新电子表格、淹没在便利贴中并参加每周更新会议?这确实是耗费时间和精力。借助软件工具的帮助,您可以一目了然地全面了解您的项目。如今,国内外有足够多优秀的项目管理软件可以帮助您掌控每个项目。什么是项目管理软件?项目管理软件是广泛行业用于项目规划、资源分配和调度的软件。它使项...
项目管理软件   1000  
  华为作为全球领先的信息与通信技术(ICT)解决方案提供商,其全球化项目的成功离不开高效的项目管理方法。其中,集成产品开发(IPD)流程是华为项目管理体系的核心组成部分。IPD流程不仅帮助华为在复杂的全球化项目中实现了资源的高效整合,还通过跨部门协作和持续优化,确保了项目的高质量交付。本文将通过具体案例,分析华为IPD流...
IPD测试流程   0  
  IPD(Integrated Product Development)是一种以跨职能团队协作为核心的产品开发流程,旨在通过整合资源、优化流程和提高决策效率,实现产品从概念到市场的快速、高效交付。IPD流程的核心思想是将传统的串行开发模式转变为并行开发模式,通过跨部门协作和早期风险识别,减少开发周期中的浪费和返工。这种方...
IPD流程分为几个阶段   0  
  华为的集成产品开发(IPD)流程是企业项目管理中的经典实践,其核心在于通过跨部门协同实现高效的产品开发。IPD流程强调从市场需求到产品交付的全生命周期管理,而跨部门沟通则是这一流程成功的关键。在华为的实践中,跨部门沟通不仅仅是信息的传递,更是团队协作、目标对齐和资源整合的重要手段。本文将深入探讨IPD流程中的跨部门沟通...
IPD项目管理咨询   0  
  IPD流程全称是集成产品开发(Integrated Product Development),它是一种以客户需求为导向、跨部门协作的产品开发模式。与传统产品开发模式相比,IPD强调在产品开发的早期阶段就整合市场、研发、制造、采购等多个部门的资源和能力,通过并行工程和协同工作来提升开发效率。IPD流程的核心在于打破部门壁...
IPD产品开发流程   0  
热门文章
项目管理软件有哪些?
云禅道AD
禅道项目管理软件

云端的项目管理软件

尊享禅道项目软件收费版功能

无需维护,随时随地协同办公

内置subversion和git源码管理

每天备份,随时转为私有部署

免费试用