从FastAPI接口向Svelte前端获取数据失败求助

• 纠正误区：目录结构和当前问题无关，你遇到的undefined是fetch调用的处理逻辑问题——React用useQuery正常是因为它封装了Promise解析、错误处理等步骤，而Svelte里直接用fetch需要手动处理完整流程。

• 排查fetch调用核心问题：

  1. 必须使用完整URL：不要直接写fetch('/hello')，Svelte开发服务运行在localhost:5173，相对路径会请求5173端口而非FastAPI的8000端口。正确写法：

     fetch('http://localhost:8000/hello')
     

  2. 完整处理Promise与响应：fetch返回的是Promise，需手动解析响应体并处理错误，否则会输出undefined。示例代码：

     async function fetchHello() {
       try {
         const response = await fetch('http://localhost:8000/hello');
         // 先校验响应状态是否正常
         if (!response.ok) throw new Error(`请求失败：${response.status}`);
         // 根据接口返回格式选择json()或text()
         const data = await response.json();
         console.log(data); // 此处会输出正确的接口返回值
       } catch (error) {
         console.error('请求出错：', error);
       }
     }
     

• 验证FastAPI后端配置：

  1. 确认CORSMiddleware配置覆盖了localhost:5173，示例正确配置：

     from fastapi import FastAPI
     from fastapi.middleware.cors import CORSMiddleware
     
     app = FastAPI()
     
     origins = ["http://localhost:5173"]
     
     app.add_middleware(
         CORSMiddleware,
         allow_origins=origins,
         allow_credentials=True,
         allow_methods=["*"],
         allow_headers=["*"],
     )
     
     @app.get("/hello")
     async def hello():
         return {"message": "Hello from FastAPI"}
     

  2. 直接在浏览器地址栏访问http://localhost:8000/hello，确认接口能正常返回数据，排除后端本身的问题。

• 用浏览器Network面板定位问题：
  打开浏览器开发者工具的Network标签，发起fetch请求后查看：

  • 请求的URL是否正确
  • 响应状态码是200还是其他错误码
  • 是否有CORS相关的报错信息（如果有，说明CORSMiddleware配置有误）

内容的提问来源于stack exchange，提问作者Olli