java - 将 spring boot 与 vaadin 结合使用时，js 文件出现 404

Question

在带有 spring-boot 的 vaadin 项目中使用 spring security 时遇到问题。所以我正在使用 PdfViewer Addon 来显示 PDF 文件。但是我收到以下错误消息:

error:"Not Found"
message:"No message available"
path:"/APP/PUBLISHED/pdf.worker.js"
status:404

我的 spring 安全配置如下所示:

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .headers()
                .defaultsDisabled()
                .frameOptions().sameOrigin().and()
                .csrf().disable() // Use Vaadin's CSRF protection
                .authorizeRequests().antMatchers("/").permitAll()
                .antMatchers("/vaadinServlet/HEARTBEAT/**").permitAll()
                .antMatchers("/vaadinServlet/UIDL/**").permitAll()
                .antMatchers("/vaadinServlet/APP/PUBLISHED/**").permitAll()
                .antMatchers("login?debug").permitAll()
                .antMatchers("/#!pwdreset/*").permitAll()
                .antMatchers("/pwdreset/*").permitAll()
                .and()
                .authorizeRequests()
                .and()
                .formLogin().loginPage("/#!login").permitAll()
                .and()
                .logout().logoutUrl("/#!login?logout").logoutSuccessUrl("/").permitAll().and()
                .sessionManagement().sessionFixation().newSession();

    }

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/resources/**", "/VAADIN/**");
    }

所以在 Chrome 中检查加载的文件我看到一个文件夹 /vaadinServlet/APP/PUBLISHED/ 并且有所有需要的文件。

在没有 Spring Security 的情况下使用插件可以正常工作，所以有人知道吗？

---

更新

它似乎与 spring security 无关，因为我在一个新的简单项目中测试插件时得到了类似的行为。好像是spring boot的问题。

要重现此问题，您需要 ( full project for download):

• 基本的 spring boot + vaadin 应用框架
• 简单的PDF在/webapp/files下
• PdfViewer add-on在你的 pom 和 widgetset 中编译
• 下面的简单用户界面

@Theme("mytheme")
@SpringUI
@Widgetset("org.test.AppWidgetSet")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
        File file = new File(basepath.concat("/files/test.pdf"));
        if (file.exists()) {
            PdfViewer pdfViewer = new PdfViewer(file);
            Label info = new Label("File was found!");
            layout.addComponents(info, pdfViewer);
        } else {
            Label info = new Label("no file found!");
            layout.addComponent(info);
        }
        setContent(layout);
    }
}

• 打开 chrome 和开发人员工具并选择 Network 选项卡，访问该应用程序，您应该会看到一个对 pdf.worker.js 的请求失败。

Answer 1

TL;DR; 版本:

第二个请求由 pdf.js 触发下载 pdf.worker.js，但它与路径 /vaadinServlet/APP/不匹配PUBLISHED/pdf.worker.js 由自动配置的 VaadinServlet 处理，它只是 /APP/PUBLISHED/pdf.worker.js。

我能想出的最简单的解决方案是一个 Controller forwards对 VaadinServlet 的请求:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PdfJsRedirectController {
    private static final String WORKER_JS_INCORRECT_PATH = "/APP/PUBLISHED/pdf.worker.js";
    private static final String WORKER_JS_CORRECT_FORWARD_PATH = "forward:/vaadinServlet/APP/PUBLISHED/pdf.worker.js";

    @RequestMapping(value = WORKER_JS_INCORRECT_PATH)
    public String forwardWorkerJsRequestToVaadin() {
        return WORKER_JS_CORRECT_FORWARD_PATH;
    }
}

---

详细版本:

所以，我花了一些时间调试它，结果证明它是不幸配置的组合:

• spring dispatcher servlet 监听
• vaadin spring servlet 监听
• 一个 pdf.js 错误修复/解决方案

发生的事情是，spring 注册了一个 DispatcherServlet 服务于 /* 的请求。并且 Vaadin 为 /vaadinServlet/* 和 /VAADIN 路径注册了一个 VaadinSpringServlet:

ServletRegistrationBean  : Mapping servlet: 'dispatcherServlet' to [/]
ServletRegistrationBean  : Mapping servlet: 'springVaadinServlet' to [/vaadinServlet/*, /VAADIN/*]

为了与调度程序 servlet 共存并能够为“/*”上的请求提供服务，Vaadin 还为 UI 路径注册了一个转发 Controller 。例如，对 /MyUI 的请求将被转发到 /vaadinServlet/MyUI(有关详细信息，请参阅 VaadinServletConfiguration sources)。

到目前为止，一切正常，您应该不会遇到任何问题。就像你说的，查看 chrome dev-tools 所有的 js 文件都在那里，所以怎么了？如果您仔细查看访问您的应用程序时发出的请求，您会注意到实际上有 2 个请求 pdf.worker.js - 第一个成功，另一个给你 404:

失败调用的 Initiator 列实际上是 pdf.js:2344如果你设置了一个断点，你实际上可以看到 workerSrc=/APP/PUBLISHED/pdf.worker.js，这个值在 pl.pdfviewer.client.ui.PdfViewer.java 中定义。 .您可能需要水平滚动一点才能看到代码，因此我将其格式化如下:

public native void loadResourcePdf(String fileName, VPdfViewer instance)/*-{
    var pdfviewer = instance.@pl.pdfviewer.client.ui.VPdfViewer::jsObject;
    pdfviewer.work = false;
    if ((pdfviewer.fileName == null || pdfviewer.fileName != fileName) && fileName != null) {
        $wnd.PDFJS.disableStream = true;
======> $wnd.PDFJS.workerSrc = 'APP/PUBLISHED/pdf.worker.js';
        $wnd.PDFJS.getDocument(fileName).then(function (pdf) {
            pdfviewer.pdfFile = pdf;
            pdfviewer.fileName = fileName;
            pdfviewer.pageCount = pdf.numPages;
            if (pdfviewer.pageNumber == 0 && pdf.numPages > 0) {
                pdfviewer.pageNumber = 1;
            }
            pdfviewer.showPdfPage(pdfviewer.pageNumber);
        });
    }

}-*/;

在常规的 Vaadin 环境中，/APP/PUBLISHED/pdf.worker.js 可以开箱即用，但我们现在的环境略有改变，因此我们需要进行一些调整。最重要的是，我们可以使用与 Vaadin 自动配置类似的方法，并将 /APP/PUBLISHED/pdf.worker.js 请求重定向到 /vaadinServlet/APP/PUBLISHED/pdf.worker.js 终于解决了这个问题。为了简洁起见，可以在本文开头看到重定向 Controller 。