调用服务端接口获取PDF在新窗口打开显示源码无法正常预览如何解决

• axios参数配置错误：responseType: 'blob'属于axios的全局请求配置项，你错误将它放在了post方法的第二个参数（请求体对象）中，导致axios没有正确识别响应类型配置，默认将返回内容解析为了UTF-8字符串而非二进制流，后续生成的Blob对象内容已损坏，浏览器无法识别为PDF文件，直接展示源码。
• 服务端跨域配置不匹配：服务端设置的允许请求方法仅包含GET和OPTIONS，但前端使用POST发起请求，跨域预检会直接失败，返回的内容本身也存在异常。
• 服务端未指定正确的PDF响应头：返回文件时没有设置Content-Type: application/pdf，部分浏览器会默认将响应按文本类型处理。

前端代码修正 #

将请求体和配置项拆分，responseType放到第三个参数的配置对象中：

axios
.post(DOMENNAME + "/API/getPdf", { id: id }, { responseType: 'blob' })
.then((res) => {
   const url = window.URL.createObjectURL(new Blob([res.data],{type: "application/pdf"}));
     window.open(url);
   })
 .catch((e) => {
    console.log(e.message);
    dispatch(getPdfFailure());
  });

如果出现弹窗被浏览器拦截的情况，可以替换为iframe内嵌预览的方案。

服务端代码修正 #

补充POST方法的跨域支持，同时设置PDF对应的响应头：

module.exports.taskGetPdf=(req,res)=>{
  res.set("Access-Control-Allow-Origin", "*");
  // 新增POST方法支持
  res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.set("Access-Control-Allow-Headers", "Content-Type");
  // 指定PDF响应类型
  res.set("Content-Type", "application/pdf");
  res.sendFile("result38555.pdf", { root: __dirname })
}

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