Nginx-WSGI部署的Flask服务接收FormData文件上传跨域失败问题排查

该报错是典型的CORS预检请求（OPTIONS）校验失败，和new FormData()没有直接关系，真实原因有两个：

• 你全局配置的axios默认会携带Authorization请求头，上传请求也自动带上了这个头
• 你当前/uploadfile路由的CORS配置没有放行Authorization头，也没有正确处理OPTIONS预检请求
  你之前的普通POST/GET/PUT请求属于不需要预检的简单请求，所以不会触发该校验，才会出现其他接口正常唯独上传接口报错的情况

第一步：修复Flask端CORS配置 #

直接使用flask-cors库做统一配置，避免手动写OPTIONS响应逻辑出错：

• 先安装依赖：pip install flask-cors
• 在Flask启动文件中添加全局CORS配置，放行需要的头和方法：

from flask_cors import CORS

app = Flask(__name__)
# 全局配置CORS，允许Authorization头，覆盖所有路由
CORS(app, supports_credentials=True, allow_headers=["Content-Type", "Authorization"], methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"])

如果只需要给/uploadfile路由单独配置，可以用路由装饰器：

@app.route('/uploadfile', methods=['POST', 'OPTIONS']) # 要显式允许OPTIONS方法
@cross_origin(supports_credentials=True, allow_headers=["Content-Type", "Authorization"])
# @token_required
def upload_file():
    # 原有业务逻辑保持不变

第二步：修正前端axios上传的冗余配置 #

你手动设置Content-Type: multipart/form-data属于错误配置：浏览器发送FormData时会自动生成带boundary分隔符的Content-Type头，手动设置会丢失boundary参数，导致服务端无法解析文件，直接删掉该配置即可：

axios.post('https://api.web.app/uploadfile', formData)
.then(response => {
  // 原有逻辑保持不变
  console.log('response.data.imgUrls', response.data.imgUrls)
  if (DLOrSOW === 'sow') {
    setSOWImgUrls(response.data.imgUrls)
  } else {
    setDLImgUrls(response.data.imgUrls)
  }
})

第三步（可选）：无鉴权需求时单独移除该请求的Authorization头 #

如果你的/uploadfile接口确实不需要token校验（你已经注释了@token_required装饰器），可以给这个请求单独移除Authorization头，避免不必要的CORS校验：

axios.post('https://api.web.app/uploadfile', formData, {
  transformRequest: (data, headers) => {
    delete headers.Authorization;
    return data;
  }
})

内容的提问来源于stack exchange，提问作者shachaf zilberman