Express如何获取Kendo React PDFExport通过proxyURL发送的Form Data数据

原因说明 #

Express 默认不会解析 multipart/form-data 格式的请求体，Kendo React PDFExport 向 proxyURL 提交的PDF数据正是以该格式封装在Form Data中，因此仅打印req.headers无法获取目标数据。

解决步骤 #

• 第一步：安装Express生态下专门处理multipart/form-data请求的中间件multer

npm install multer

• 第二步：修改服务端代码，调整中间件顺序并新增multer解析逻辑
  修改后的核心代码如下：

const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./db/schema');
const resolvers = require('./db/resolvers');
const {
    GraphQLUpload,
    graphqlUploadExpress,
  } = require('graphql-upload');    

const jwt = require('jsonwebtoken')
const conectarDB = require('./config/db');
const { bootstrap: bootstrapGlobalAgent } = require('global-agent');
// 新增：导入multer
const multer = require('multer');

const cors = require("cors");
require('dotenv').config({path: 'variables.env'});

conectarDB();
bootstrapGlobalAgent();

// 新增：配置multer，如需直接存到本地可替换为diskStorage配置
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

async function startServer() {
    const server = new ApolloServer({
      typeDefs,
      resolvers,
      cors: {
        credentials:true,
        origin: process.env.PAGINA,
        optionsSuccessStatus:200
      },
      context: ({req}) => {
          const token = req.headers['authorization'] || '';
          if (token) {
              try {
                const usuario = jwt.verify(token.replace('Bearer ', ''), process.env.SECRETA )
                console.log(usuario);
                return {
                  usuario
                }
              } catch (error) {
                console.log("HUBO UN ERROR");
                console.log(error.message);
              }
          }
      }
    });
    
    await server.start();
    
    const app = express();
    try {
        app.use(graphqlUploadExpress());
        app.use(express.static('public'));
        // 调整：将CORS中间件移到路由定义前，否则跨域请求会被拦截
        app.use(cors({
          origin: process.env.PAGINA,
          credentials: true,
          optionsSuccessStatus:200
        }))
        
        // 修改：PDF代理路由新增multer解析，Kendo提交的PDF文件字段名为file
        app.all("/pdf", upload.single('file'), (req, res) => {
            console.log("header", req.headers);
            // 打印Form Data中的PDF文件信息
            console.log("PDF文件内容：", req.file);
            // 打印Form Data中的其他附加参数
            console.log("其他表单参数：", req.body);
            // 后续可自行处理PDF文件，如写入本地存储、上传云存储等
            res.send('Data')
        })

        server.applyMiddleware({ app });

        app.listen({ port: process.env.PORT || 4000}, () => {
          console.log(`Servidor corriendo http://localhost:${process.env.PORT || 4000}${server.graphqlPath}`);
        })
    } catch (error) {
       console.log(error); 
    }
}

startServer();

• 第三步：触发PDF导出操作，即可在服务端控制台看到Form Data中的完整PDF数据，req.file.buffer为PDF文件的二进制内容，可直接使用。

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