通过Firebase Functions上传图片遇CORS及文件接收问题求助

我之前在使用Firebase Functions处理文件上传时也碰到过几乎一模一样的问题——本地跑完全正常，一部署到远程就CORS报错还拿不到文件。结合你的代码和场景，咱们一步步来解决：

1. 修正multer存储路径与中间件顺序 #

你的代码里有两个关键问题：

• Firebase Functions的临时目录是绝对路径/tmp/，不是相对路径./tmp/，远程环境下相对路径会找不到目录，multer无法写入文件，自然req.file就是null
• 把cors()和upload.single('file')放在同一个app.use里会导致预检请求（OPTIONS）被multer拦截，而且全局挂载上传中间件也会影响其他路由

修改后的代码应该是这样：

const storage = multer.diskStorage({ 
  destination: '/tmp/', // 改用绝对路径的临时目录
  filename: (req, file, cb) => { 
    cb(null, file.originalname); 
  } 
}); 
const upload = multer({ storage }); 

export default () => { 
  const app = express(); 

  // 先配置CORS，明确允许本地前端域名、必要的请求方法和头部
  app.use(cors({
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type']
  }));

  // 单独处理OPTIONS预检请求，避免multer拦截
  app.options('*', cors());

  // 只在POST路由上挂载上传中间件，不要全局用
  app.post('/', upload.single('file'), (req, res) => { 
    console.log('Received file:', req.file); // 加日志方便远程排查
    if (req.file) { 
      res.send({ path: req.file.path }); 
    } else { 
      res.send({ responseText: 'no file' }); 
    } 
  }); 

  return app; 
};

2. 确认前端FormData格式正确 #

react-dropzone-component上传时，一定要保证FormData里的字段名和后端upload.single('file')的参数完全一致（都是file）。检查你的前端代码是不是类似这样：

// 处理drop事件获取到files后
const handleUpload = (files) => {
  const formData = new FormData();
  formData.append('file', files[0]); // 这里的键名必须是'file'
  formData.append('any-other-data', 'value'); // 如果有其他参数也可以加

  fetch('https://your-firebase-functions-url', {
    method: 'POST',
    body: formData,
    // 不要手动设置Content-Type！浏览器会自动加上正确的multipart/form-data边界
    // headers: { 'Content-Type': 'multipart/form-data' } // 这句话要删掉
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
};

特别注意：不要手动设置Content-Type: multipart/form-data，浏览器会自动添加带边界标识的正确头部，手动设置会导致后端无法解析文件。

3. 远程环境日志排查 #

如果还是有问题，去Firebase控制台打开你的Functions日志，查看请求的headers和req.file的打印信息：

• 如果日志里没有req.file的内容，说明后端没收到文件，大概率是前端FormData格式错了
• 如果看到OPTIONS请求失败，说明CORS配置还是有问题，检查origin是不是和前端域名完全一致（包括http/https、端口）

4. 验证Firebase Functions环境 #

确认你部署的是最新代码，有时候会因为缓存或者部署失败导致远程运行的还是旧代码。另外，Firebase Functions的/tmp/目录是临时存储，每个实例的目录独立，但上传时是可以正常写入的，不需要额外配置权限。

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