-1

我正在尝试使用反应前端和 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 文件时，问题就出现了。下面是一个不起作用的代码片段：

@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？yaml.load()我不认为会是这种情况，因为处理仍然应该在同一个端点上完成（注意端点在同一个地方），但是 CORS 显然对使用该功能不满意。任何关于能够在我的后端加载 yaml 文件的建议将不胜感激。

根据 Rishabh Batra 的请求，我在此处添加了 OPTIONS 标头：在此处输入图像描述

4

2 回答 2

1

解决了。结果，对于构建starlette的库，FastAPIUploadFile 对象与 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 错误

于 2020-03-03T20:18:54.277 回答
0

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

origins = [
    "http://localhost:*",
    "http://localhost:3000",
    "http://127.0.0.1:8000",
]
于 2020-02-25T15:21:46.387 回答