Next.js部署Vercel后调用Firebase Storage上传文件偶现405错误

核心故障原因（匹配你描述的路径相关、405无明确报错的特征） #

• Ant Design Upload 组件默认上传行为未覆盖
  Antd Upload 组件未显式配置customRequest属性时，会自动向当前页面URL发起POST请求提交文件，而Vercel托管的Next.js静态页面路由本身不支持POST请求，直接返回405状态码。不同路径下的表现差异是因为部分路径可能对应支持POST的API路由，就会出现“时好时坏”的现象，本地开发服务器因为自带的兼容逻辑未触发报错，到生产环境才暴露问题。

修复方案 #

1. 覆盖Antd Upload的默认上传逻辑
   给Upload组件新增customRequest属性，将你的Firebase上传逻辑写入该配置项，同时阻止默认提交行为，示例代码如下：

<Upload
  customRequest={({file, onSuccess, onError}) => {
    firebaseApp
      .storage()
      .ref(`pictures/${file.name}`)
      .put(file.originFileObj)
      .then(() => {
        console.log("Picture uploaded")
        onSuccess("ok")
      })
      .catch((err) => {
        console.log(err.message);
        onError(err)
      });
    // 可选：返回取消上传的方法
    return { abort: () => {} }
  }}
>
  {/* 原有上传按钮/拖拽区域逻辑 */}
</Upload>

2. 排查Next.js路由冲突
   检查报错的表单URL对应的路由目录：

• 如果使用App Router，确认路径下没有同名的route.js/ts文件，若存在该文件且仅导出了GET方法，未导出POST方法也会返回405
• 如果使用Pages Router，确认pages/api目录下没有和表单URL同名的API路由

验证方法 #

复现报错时打开浏览器网络面板，查看405请求的目标地址：如果请求地址为当前页面URL，即可确认是Antd默认上传行为导致的问题。

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