当前位置：首页 > news >正文

使用fetch调用fastapi接口（post）的实例

news 2025/8/6 14:50:10

前端代码

//定义函数
async function sendRequest(data) {let myurl="http://127.0.0.1:8848/get_student_info"const response = await fetch(myurl, {method: 'POST',mode: 'cors',  // 执行跨域请求headers: {'Content-Type': 'application/json',         },body: JSON.stringify({         "name": "山南","gender": "男",    })});  let res = '';let str;// 等待 Promise 对象被解决（resolved）const json_res = await response.json();str=json_res.ageaddResponseMessage(String(str)); return str;}let data;data = { "apiKey": ""};// 将data传入sendRequest然后处理该函数的返回值ressendRequest(data).then((res) => {     // 重新绑定键盘事件chatInput.on("keydown",handleEnter); // 判断是否是回复正确信息if(resFlag){messages.push({"role": "assistant", "content": res});         });

python fastapi后端

from typing import Union
from fastapi import FastAPI
from uvicorn import run #直接在py文件中启动webapi服务
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware #解决跨域问题https://blog.csdn.net/Tong_yanpeng/article/details/122893166app = FastAPI()# 不知为何如果添加了准确的ip和端口号，则仍然存在跨域问题，因此，允许所有来源的请求。
origins = ["*"]   
#  配置允许域名列表、允许方法、请求头、cookie等
app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=False,allow_methods=["*"],allow_headers=["*"],
)#   声明参数类 fastapi要对前端传过来的参数进行校验，所以要定义对应的类
class Student(BaseModel):name: strgender: str
@app.post("/get_student_info")
async def get_student_info(request_data: Student):name = request_data.name+"_ok"gender =  request_data.gender+"_ok"age=18res = {'name':name,'gender':gender,'age':18,'status':200}return res  # 返回一个jsonif __name__ == '__main__':print("start")run(app, host="127.0.0.1", port=8848)  # http://127.0.0.1:8848print("end")