本文旨在解决在使用 Flask 作为后端，React 作为前端时，由于 CORS (跨域资源共享) 策略导致的 Axios POST 请求失败的问题。文章将分析常见原因，并提供一种通过切换到 FastAPI 框架来规避此问题的解决方案，同时简要介绍 FastAPI 中 CORS 的配置方法。
CORS 错误排查与 Flask 的局限性
跨域资源共享 (CORS) 是一种浏览器安全机制，用于限制网页从与自身不同源的服务器请求资源。当你的前端 (例如，运行在 http://localhost:3001 的 React 应用) 向后端 (例如，运行在 http://localhost:5000 的 Flask 应用) 发送请求时，如果后端没有正确配置 CORS，浏览器会阻止该请求，并显示类似 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误。
即使你已经在 Flask 中使用了 flask_cors 库，仍然可能遇到 CORS 问题。这可能是由于以下原因：
- 配置不正确： 确保你的 flask_cors 配置正确，允许来自你的前端域的请求。
- 请求头不匹配： 某些请求头 (例如 Content-Type: application/json) 可能会触发浏览器的预检请求 (preflight request)，如果后端没有正确处理预检请求，也会导致 CORS 错误。
- 其他中间件冲突： 其他中间件可能干扰 flask_cors 的工作。
切换到 FastAPI：一种更简洁的解决方案
虽然在 Flask 中配置 CORS 可以解决问题，但有时可能会比较繁琐。一个更简洁的替代方案是使用 FastAPI 框架。FastAPI 具有内置的 CORS 支持，配置起来更加简单直观。
以下是如何在 FastAPI 中配置 CORS 的示例代码：
from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import JSONResponse
app = FastAPI()
origins = [
"*", # 允许所有来源，生产环境不建议使用
# "http://localhost:3000", # 允许特定来源
# "https://your-domain.com",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"], # 允许所有方法
allow_headers=["*"], # 允许所有头部
)
@app.post("/process")
async def process(image: UploadFile = File(...)):
print('process')
# 在这里处理图像
return JSONResponse({"response": "OK"})代码解释：
- 导入必要的模块： 导入 FastAPI, File, UploadFile, CORSMiddleware 和 JSONResponse。
- 创建 FastAPI 应用实例： app = FastAPI() 创建一个 FastAPI 应用实例。
-
配置 CORS 中间件：
- origins：定义允许的来源列表。在开发环境中，可以使用 "*" 允许所有来源。注意：在生产环境中，强烈建议只允许特定的来源，以提高安全性。
- allow_credentials：设置为 True 以允许跨域请求携带凭据 (例如 cookies)。
- allow_methods：定义允许的 HTTP 方法列表。"*" 允许所有方法 (GET, POST, PUT, DELETE 等)。
- allow_headers：定义允许的请求头列表。"*" 允许所有头部。
- 添加 CORS 中间件： 使用 app.add_middleware() 将 CORSMiddleware 添加到 FastAPI 应用中。
- 定义路由： 使用 @app.post("/process") 定义一个 POST 请求的路由。在这个例子中，它接收一个名为 image 的文件上传。
- 处理请求： 在 process 函数中，你可以处理上传的图像，并返回一个 JSON 响应。
注意事项：
- 在生产环境中，绝对不要将 origins 设置为 "*"，因为它会允许任何来源的请求，从而带来安全风险。应该只允许你信任的特定来源。
- 根据你的具体需求，调整 allow_methods 和 allow_headers 的值。
- 确保你的前端代码发送的请求头与后端配置的 allow_headers 匹配。
总结
虽然在 Flask 中配置 CORS 也能解决问题，但使用 FastAPI 可以更轻松地实现 CORS 配置。通过简单地添加 CORSMiddleware，你可以快速解决跨域问题，并专注于你的业务逻辑。 如果你正在构建一个新的 API，或者在 Flask 中遇到难以解决的 CORS 问题，不妨考虑切换到 FastAPI。
