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

Question

我正在尝试使用 React 前端和 fastapi 后端创建一个简单的 web-application。 web-app 的一个功能是发送一个在前端收集并在后端处理的文件。我在后端有一个端点，看起来像：

@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 文件时出现问题。以下是无效的代码片段：

@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 的要求，我在此处添加了选项 headers：

Answer 1

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

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

Answer 2

解决了。 starlette 是 FastAPI 构建的库，UploadFile 对象与 python 文件对象不同。如果你想让它表现得像一个 python 文件对象，你必须做 file.file。所以对于上面失败的片段，正确的方法是：

@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 错误

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

CORS error when using pyyaml with FastAPI

python

cors

pyyaml

fastapi