JavaScript ES6 FastAPI 获取结果 "Type Error"

Question

我尝试在我的本地计算机上使用 FastAPI 后端设置一个简单的 API，然后使用一个简单的 JS 脚本获取它。我用谷歌搜索了一整天，但仍然无法找出问题所在。

我敢打赌我错过了什么。

The FastAPI 后端看起来像：

from fastapi import FastAPI
import uvicorn

from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()

origins = [
    "http://localhost",
    "http://localhost:8000",
    "http://127.0.0.2",
    "http://127.0.0.2:8000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=False,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def root():
    return {"Message": "Root"}

    
if __name__ == '__main__':
    uvicorn.run(app, host="127.0.0.2", port="8000")

Js 脚本看起来像：

async function getRoot() {

fetchAdresse = 'http://127.0.0.2:8000';


const response = await fetch(fetchAdresse, {
    method: 'GET',
    headers: {
        accept: 'html/text',
    },
});

console.log(response);

}

getRoot();

响应始终相同：

Uncaught TypeError TypeError: Failed to fetch

另一方面，Hand 服务器响应是：

INFO:     127.0.0.1:60927 - "GET / HTTP/1.1" 200 OK

Answer 1

“获取失败”可能有多种含义。

我建议您在检查模式下打开网络选项卡。它应该看起来像这样：当程序获取时，应该会发出一个请求，您应该会在那里看到它。然后您可以查看“状态”，或单击更清楚错误的请求，然后 Google 那。

JavaScript ES6 FastAPI 获取结果 "Type Error"

JavaScript ES6 FastAPI Fetch results in "Type Error"

javascript

ecmascript-6

fetch-api

fastapi