将 pyyaml 与 FastAPI 一起使用时出现 CORS 错误

Question

我正在尝试使用 react 前端和 fastapi 后端创建一个简单的 Web 应用程序。 Web 应用程序的一个功能是发送在前端收集并在后端处理的文件。我在后端有一个端点，如下所示：

@app.post("/upload_file/")
async def create_upload_file(file: UploadFile = File(...)):
    for line in file.file.readlines():
        print(line)
    file.file.close()
    return {"filename": file.filename}

我已确认此代码有效。我可以从前端发送一个文件，观察后端终端上打印出来的行，然后前端会收到一个带有 200 状态码和文件名的 http 响应。

当我尝试使用 pyyaml 库处理入站 yaml 文件时，问题就出现了。下面是一个不起作用的代码 sn-p：

@app.post("/upload_file/")
async def create_upload_file(file: UploadFile = File(...)):
    yaml_data = yaml.load(file, Loader=yaml.FullLoader)
    return yaml_data

我得到错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/upload_file/' (redirected from 'http://127.0.0.1:8000/upload_file') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

所以这似乎是一个 CORS 问题...我目前的 FastAPI 的 CORS 政策如下所示：

origins = [
    "http://localhost",
    "http://localhost:3000",
    "http://127.0.0.1:8000",
]

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

我是否必须在我的 CORS 策略中添加一些内容以允许它使用 pyyaml？我不认为会是这种情况，因为处理仍然应该在同一个端点上完成（注意端点在同一个地方），但是 CORS 显然不喜欢使用 yaml.load() 函数。任何关于能够在我的后端加载 yaml 文件的建议将不胜感激。

根据 Rishabh Batra 的请求，我在此处添加了 OPTIONS 标头：

Answer 1

解决了。原来starlette 是一个由FastAPI 构建的库，UploadFile 对象与python 文件对象不同。如果你想让它表现得像一个 python 文件对象，你必须做file.file。因此，对于上述失败的 sn-p，正确的方法是：

@app.post("/upload_file/")
async def create_upload_file(file: UploadFile = File(...)):
    yaml_data = yaml.load(file.file, Loader=yaml.FullLoader)
    return yaml_data

CORS 政策是正确的，不知道为什么会引发 CORS 错误

Answer 2

在您可以使用的不同端口上运行的后端代码 * 或定义在您的应用上使用的所有端口

origins = [
    "http://localhost:*",
    "http://localhost:3000",
    "http://127.0.0.1:8000",
]