Axios请求Express接口时无法获取响应JSON中pdfData字段如何解决

response.data.pdfData返回undefined的核心原因是Axios的responseType配置错误：

• 你的服务端返回的是Content-Type: application/json类型的JSON响应，结构为{ pdfData: base64字符串 }
• 客户端Axios请求中配置了responseType: 'blob'，该配置会强制Axios将响应体解析为二进制Blob对象，不会执行JSON反序列化。此时response.data是Blob实例，不存在pdfData属性，访问自然返回undefined。
• 浏览器Network面板展示的是原始HTTP响应内容，不受Axios本地解析配置影响，因此你可以在Preview栏看到正确的键值对。

额外注意：你当前服务端代码存在并发安全问题，所有请求生成的PDF都写入固定路径的response.pdf文件，多用户同时请求时会出现文件覆盖，导致用户拿到不属于自己的PDF内容。

客户端修复 #

根据你返回base64封装JSON的设计，直接删除Axios配置中的responseType: 'blob'即可，Axios会自动识别JSON响应并解析为JS对象：

// FILE: ./Client/src/App.vue
submit(personalInfo) {
  this.cardInfo.personalInfo = personalInfo;
  console.log('Sending POST preview_card...');
  axios({
    url: 'http://localhost:5000/api/preview_card',
    method: 'POST',
    // 移除 responseType: 'blob' 配置，默认使用json解析
    data: {
      cardInfo: this.cardInfo,
    },
  }).then((response) => {
    console.log(response.data.pdfData); // 此处可正常获取base64值
    // 拿到base64后可拼接data:application/pdf;base64,前缀，直接赋值给iframe的src实现预览
  });
},

如果你需要直接获取Blob类型的PDF用于预览/下载，也可以调整服务端直接返回PDF二进制流，保留responseType: 'blob'配置即可，这种方案比base64传输体积小约33%，效率更高。

服务端并发问题修复 #

你当前的写本地文件再读取的逻辑完全没有必要，jsPDF原生支持直接输出base64/buffer内容，去掉文件读写逻辑即可从根源解决并发覆盖问题：

// FILE: ./Server/app.js
app.post('/api/preview_card', (req, res) => {
  // 生成PDF
  const doc = new jsPDF('p');
  doc.setFontSize(40);
  doc.text(req.body.cardInfo.templateInfo, 100, 100);
  // 直接输出纯base64内容，无需落盘读写文件
  const pdfBase64 = doc.output('datauristring').replace('data:application/pdf;base64,', '');
  res.json({ pdfData: pdfBase64 });
});

如果业务必须保留文件落盘逻辑，需要为每个请求生成唯一的临时文件名（例如拼接UUID），读取完成后立即删除临时文件，避免多请求覆盖同一路径文件。

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