JHipster+Vue项目点击按钮打开PDF报Cannot GET错误如何解决

• 你遇到的404错误核心是generatedPdf目录默认没有被配置为静态资源服务目录，无论是Vue开发环境的devServer还是Java后端服务，都不会主动对外暴露这个目录下的文件，前端发起的GET请求自然找不到对应资源。
• 另外你给出的报错信息中请求路径不带.pdf后缀，也有可能是前端路由规则或者服务端重写规则把后缀吃掉了，也会导致资源匹配失败。

方案1：仅本地开发临时可用（不推荐生产使用） #

在Vue项目的vue.config.js中配置devServer的静态资源映射，将generatedPdf目录加入静态资源列表：

const path = require('path')
module.exports = {
  // 其他原有配置保留
  devServer: {
    static: [
      // 原有静态资源配置保留，新增下面这条规则
      { directory: path.join(__dirname, 'generatedPdf'), publicPath: '/generatedPdf' }
    ]
  }
}

修改后重启本地开发服务即可正常访问。

方案2：生产环境标准方案（推荐） #

不要把动态生成的PDF放在前端源码目录下，在Java后端新增一个专门的PDF预览接口，由后端读取文件返回给前端：

后端（以SpringBoot为例）代码示例 #

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;

@RestController
public class PdfController {
    @GetMapping("/api/public/pdf/{fileName}")
    public void getPdf(@PathVariable String fileName, HttpServletResponse response) throws IOException {
        // 文件名合法性校验，防止路径遍历漏洞
        if (fileName.contains("../") || !fileName.endsWith(".pdf")) {
            response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
            return;
        }
        File pdfFile = new File("generatedPdf/" + fileName);
        if (!pdfFile.exists()) {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        response.setContentType("application/pdf");
        response.setHeader("Content-Disposition", "inline; filename=\"" + fileName + "\"");
        Files.copy(pdfFile.toPath(), response.getOutputStream());
        response.getOutputStream().flush();
    }
}

前端代码修改 #

将openPdf方法中的请求路径改为后端接口地址：

openPdf(){
    window.open("/api/public/pdf/toBePrintedPdf.pdf", "_blank");
    return false;
}

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