React前端通过FormData传数据至Python谷歌云函数无法获取的问题排查

1. 前端Content-Type设置错误 #

当使用FormData作为fetch的请求体时，不要手动设置Content-Type: multipart/form-data。浏览器会自动生成包含正确boundary（表单分隔符）的Content-Type头，手动设置会丢失这个关键的boundary，导致后端无法解析FormData结构。

修正后的前端请求代码： #

const response = await fetch(
  `[Cloud Function URL]`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      // 移除手动设置的Content-Type，让浏览器自动处理
    },
    body: payload
  }
);

2. 后端函数的返回与CORS设置问题 #

你的get_data函数没有返回响应，Google Cloud Function要求明确返回HTTP响应对象，否则请求会超时或报错。同时要确保CORS头配置正确，允许前端的请求头和方法。

修正后的后端代码示例： #

import functions_framework
from flask import jsonify

def set_cors_headers():
    return {
        "Access-Control-Allow-Origin": "*",  # 生产环境建议限制为特定域名
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Authorization, Content-Type"
    }

@functions_framework.http
def main(request):
    headers = set_cors_headers()

    if request.method == "OPTIONS":
        return ("", 204, headers)

    return get_data(request, headers)

def get_data(request, headers):
    # 使用get方法避免键不存在时抛出KeyError
    file = request.files.get('file')
    name = request.form.get('name')
    description = request.form.get('description')
    title = request.form.get('title')
    price = request.form.get('price')

    # 调试打印，可在Cloud Function日志中查看
    print(f"Received file: {file}")
    print(f"Received name: {name}")

    # 这里添加你的文件处理和业务逻辑...

    # 返回标准响应
    return jsonify({"status": "success", "message": "数据接收成功"}), 200, headers

3. 前端其他小问题 #

window.location.href是属性而非方法，正确的页面跳转写法应为：

window.location.href = "/login";

验证步骤 #

1. 前端修改后，打开浏览器开发者工具的Network面板，查看请求头的Content-Type，确认包含boundary字段（格式类似multipart/form-data; boundary=----WebKitFormBoundaryxxxx）。
2. 部署后端函数后，查看Google Cloud Function的日志，确认能打印出正确的文件和表单数据。

内容的提问来源于stack exchange，提问作者Khubaib Khawar