FastAPI配置CORSMiddleware仍跨域且图片上传无filename属性问题

一、CORS报错排查 #

• 优先级最高的冲突问题：你当前配置allow_origins=["*"]和allow_credentials=True不能共存，这是浏览器CORS规范的强制要求，存在凭证的请求不允许源使用通配符。解决方案二选一：
  1. 关闭凭证校验：将allow_credentials改为False
  2. 指定具体允许的源：将allow_origins改为["http://localhost:3000"]
• 检查导入路径是否正确：CORSMiddleware的正确导入语句是from fastapi.middleware.cors import CORSMiddleware，导入错误会导致中间件不生效
• 检查中间件添加顺序：CORSMiddleware必须是第一个添加到app的中间件，否则其他中间件提前返回的响应不会携带CORS头
• 注意CORS报错是表象：浏览器会拦截所有没有正确CORS头的响应，包括接口返回的4xx/5xx错误，你看到的CORS报错大概率是后端接口先抛出错误导致的，优先解决接口本身的参数错误再验证CORS问题

二、文件上传'Files' does not have a 'filename'错误排查 #

• 参数类型不匹配：你后端接口声明的files: Optional[List[UploadFile]]是多文件列表类型，而你代码直接调用files.filename，列表本身没有filename属性，解决方案二选一：
  1. 改为单文件接收：将参数改为files: Optional[UploadFile] = File(None)
  2. 取列表第一个元素操作：所有调用files属性的地方改为files[0].xxx，比如files[0].filename
• 缺失必填Form参数：你的后端接口要求caption和tags两个必填的Form字段，但是前端FormData中完全没有追加这两个参数，会直接触发FastAPI的422参数缺失错误，需要在前端补充：

  formData.append("caption", "图片标题")
  formData.append("tags", "图片标签")
  

• 前端文件对象校验：在axios发送请求前打印image变量，确认是原生File对象而非base64字符串/其他格式，同时打开浏览器控制台Network面板，查看请求的FormData部分是否存在files字段、且字段值包含正确的文件名
• 文件指针重置问题：你第一次调用pil_image.open并执行im.verify()后，文件流指针已经指向末尾，第二次打开读取时会得到空内容，需要在第二次打开前添加files.file.seek(0)重置指针

内容的提问来源于stack exchange，提问作者Jie-Liang Lin