使用Vaadin的Spring Boot时的404 for js文件

Question

在带有springboot的vaadin项目中使用spring security时遇到问题
。因此，我正在使用PdfViewer插件来显示PDF文件。但是我收到
以下错误消息：

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

and my spring security configuration looks like this:

@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/**");
    }

So checking the loaded files in Chrome I see a folder
/vaadinServlet/APP/PUBLISHED/ and there are all the files needed.

Using the Addon without Spring Security works fine, so anyone any idea?

Update

It doesn’t seem to be related to spring security, because I get a similar
behavior while testing the Addon in a new simple project. It seems to be a
problem with spring boot.

To reproduce this issue you need (full project for
download):

• basic spring boot + vaadin app skeleton
• simple PDF and under /webapp/files
• PdfViewer add-on in your pom and widgetset compiled
• the below simple UI

    @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。

我能想到的最简单的解决方案是
将请求转发到
的控制器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投放请求
/。VaadinVaadinSpringServlet为/vaadinServlet/
＆/VAADIN路径注册a ：

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

为了与调度程序servlet共存并能够在
“ / *”上处理请求，Vaadin还为UI路径注册了转发控制器。对于
例如要求在/MyUI将被转发到/vaadinServlet/MyUI（见
的VaadinServletConfiguration
源
获得更多的细节）。

到目前为止，一切正常，您应该没有任何问题。就像
您说的那样，看着chrome开发工具，所有js文件都在那里，
那怎么了？如果您在访问
应用程序时查看closley的请求，您会发现实际上有2个请求pdf.worker.js-
第一个成功，而给您404的请求：

pdf.worker.js请求

Initiator失败呼叫的列实际上是 ，如果您设置了断点，您实际上可以看到在中定义的那个值。您可能需要 水平滚动一点才能看到代码，所以我在 下面进行了格式化：

pdf.js:2344
and if you set a breakpoint you can actually see that
workerSrc=/APP/PUBLISHED/pdf.worker.js, value which is defined in
pl.pdfviewer.client.ui.PdfViewer.java. You may have
to scroll horizontally a bit to be able to see the code, so I’ve formatted it
below:

public native void loadResourcePdf(String fileName, VPdfViewer instance)/*-{
    var pdfviewer = [e-mail]::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，最终解决该问题。为了简洁起见，可以在本文
开头看到重定向控制器。