You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Firebase云函数OPTIONS预检请求遭CORS策略拦截问题求助

解决Firebase云函数Express应用的CORS预检失败问题

Access to XMLHttpRequest at 'https://us-central1-paperfire-ada3a.cloudfunctions.net/api/upload' from origin 'https://paperfire-ada3a.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

你的问题核心是CORS预检请求(OPTIONS)未被正确处理,结合代码分析存在两个关键问题:

  1. CORS配置中的origin末尾多了斜杠,导致与浏览器发送的origin不匹配
  2. Express未配置处理multipart/form-data的中间件,请求在到达CORS中间件前就出错

1. 修正CORS配置的Origin值

浏览器发送的Origin是不带末尾斜杠的,若配置的origin带斜杠会导致匹配失败,CORS包不会返回允许跨域的头。修改如下:

const corsOptions = {
    origin: 'https://paperfire-ada3a.firebaseapp.com', // 移除末尾的"/"
    optionsSuccessStatus: 200,
    methods: 'GET, POST, DELETE, OPTIONS',
    allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
};

2. 添加FormData解析中间件(multer)

前端发送的是FormData类型的文件上传请求,Express默认无法解析multipart/form-data格式,需使用multer中间件处理:

  • 安装依赖:
npm install multer
  • 引入并配置multer:
const multer = require('multer');
// 使用内存存储(适合上传到Firebase Storage的场景),限制文件大小为16MB
const upload = multer({ 
    storage: multer.memoryStorage(), 
    limits: { fileSize: MAX_FILE_SIZE } 
});
  • 修改/upload路由,用multer解析文件:
// 解析表单中名为"pdf"的文件字段(需与前端表单的文件input name一致)
app.post('/upload', upload.single('pdf'), async (req, res) => {
    console.log('Received file:', req.file); // 文件数据在req.file中,不再是req.body
    const uid = req.headers.authorization.split('bearer ')[1];
    
    // 后续PDF解析、上传到Firebase Storage的逻辑...
    
    res.status(200).json({ /* 返回你的响应数据,比如Storage链接 */ });
});

3. 确保中间件顺序与云函数配置正确

  • 保证app.use(cors(corsOptions))在所有路由之前加载,确保CORS头在所有响应中都能被设置
  • 补充runtimeOpts定义(你的代码中使用了但未声明):
const runtimeOpts = {
  timeoutSeconds: 300, // 延长超时时间,适配文件处理场景
  memory: '1GB' // 增加内存,提升PDF解析效率
};

为什么之前的方法无效?

  • Postman不会发送OPTIONS预检请求,直接发送POST请求,因此能正常访问;但浏览器会先发送OPTIONS预检验证跨域权限,预检失败则不会执行后续业务代码
  • Origin末尾的斜杠导致CORS包的匹配逻辑失效,无法返回Access-Control-Allow-Origin头
  • 未处理multipart/form-data的请求会在Express解析阶段出错,错误响应未携带CORS头,被浏览器判定为跨域失败

内容的提问来源于stack exchange,提问作者Flavius Biras

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 04:45:13