Question

我已经在Vaadin Forum发布了这个问题，遗憾的是我没有得到任何回复 - 也许这个问题的答案介于spring-boot和Vaadin之间。

目前我很难将Vaadin应用程序嵌入到HTML页面中。

我该怎么用：

Vaadin 7.6.6
vaadin-spring
spring-boot 1.3.5.RELEASE

为了结合spring-boot启用CORS，我改编了Sami's Blog entry并创建了以下自定义CORS servlet：

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;

import com.vaadin.spring.server.SpringVaadinServlet;

/**
 * This custom {@link SpringVaadinServlet} enables CORS in combination with
 * Spring.
 *
 * @author Christoph Guse
 *
 */
public class CORSServlet extends SpringVaadinServlet {

    /**
     *
     */
    private static final long serialVersionUID = -2482991123719720492L;

    /**
     * Override to handle the CORS requests.
     */
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // Origin is needed for all CORS requests
        String origin = request.getHeader("Origin");
        if (origin != null && isAllowedRequestOrigin(origin)) {

            // Handle a preflight "option" requests
            if ("options".equalsIgnoreCase(request.getMethod())) {
                response.addHeader("Access-Control-Allow-Origin", origin);
                response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS");

                // allow the requested method
                String method = request.getHeader("Access-Control-Request-Method");
                response.addHeader("Access-Control-Allow-Methods", method);

                // allow the requested headers
                String headers = request.getHeader("Access-Control-Request-Headers");
                response.addHeader("Access-Control-Allow-Headers", headers);

                response.addHeader("Access-Control-Allow-Credentials", "true");
                response.setContentType("text/plain");
                response.setCharacterEncoding("utf-8");
                response.getWriter().flush();
                return;
            } // Handle UIDL post requests
            else if ("post".equalsIgnoreCase(request.getMethod())) {
                response.addHeader("Access-Control-Allow-Origin", origin);
                response.addHeader("Access-Control-Allow-Credentials", "true");
                super.service(request, response);
                return;
            }
        }

        // All the other requests nothing to do with CORS
        super.service(request, response);

    }

    /**
     * Check that the page Origin header is allowed.
     */
    private boolean isAllowedRequestOrigin(String origin) {
        // TODO: Remember to limit the origins.
        return origin.matches(".*");
    }

}

另外我找到了一些关于spring-boot和CORS的文档，所以我添加了这个Spring配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import CORSServlet;

/**
 * @author Christoph Guse
 *
 */
@Configuration
public class AuthAppVaadinApplicationConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurerAdapter() {

            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins(".*");
            }

        };
    }

    @Bean(name="vaadinServlet")
    public CORSServlet corsServlet(){

        return new CORSServlet();

    }

}

我的HTML看起来像这样：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=9;chrome=1" />

<title>Embedding a Vaadin Application in HTML Page</title>

<!-- Set up the favicon from the Vaadin theme -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon"
href="/VAADIN/themes/reindeer/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon"
href="/VAADIN/themes/reindeer/favicon.ico" />
</head>

<body>
<!-- Loads the Vaadin widget set, etc. -->
<script type="text/javascript"
src="http://vaadin.poc:8090/VAADIN/vaadinBootstrap.js?v=7.6.6"></script>

<h1>Embedding a Vaadin UI</h1>

<p>This is a static web page that contains an embedded Vaadin
application. It's here:</p>

<!-- So here comes the div element in which the Vaadin -->
<!-- application is embedded. -->
<div style="width: 100%; height: 75vh; border: 2px solid green;"
id="helloworld" class="v-app">

<!-- Optional placeholder for the loading indicator -->
<div class=" v-app-loading"></div>

<!-- Alternative fallback text -->
<noscript>You have to enable javascript in your browser to
use an application built with Vaadin.</noscript>
</div>

<script type="text/javascript">//<![CDATA[
if (!window.vaadin)
alert("Failed to load the bootstrap JavaScript: "+
"VAADIN/vaadinBootstrap.js");

/* The UI Configuration */
vaadin.initApplication("helloworld", {
"browserDetailsUrl": "http://vaadin.poc:8090/",
"serviceUrl": "http://vaadin.poc:8090/",
"theme": "valo",
"versionInfo": {"vaadinVersion": "7.6.6"},
"widgetset": "com.vaadin.DefaultWidgetSet",
"vaadinDir": "http://vaadin.poc:8090/VAADIN/",
"heartbeatInterval": 300,
"debug": true,
"standalone": false,
"authErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Authentication problem"
},
"comErrMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Communication problem"
},
"sessExpMsg": {
"message": "Take note of any unsaved data, "+
"and <u>click here<\/u> to continue.",
"caption": "Session Expired"
}
});//]] >
</script>

<p>Please view the page source to see how embedding works.</p>
</body>
</html>

我的问题是应用程序是初始加载的，但是缺少几个图标，如果我在应用程序中触发一个操作，即打开一个dropbox，那么应用程序就无法连接到spring-boot应用程序。错误消息如下所示：

XMLHttpRequest cannot load http://vaadin.poc:8090/UIDL/?v-uiId=0. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

有没有人设法将Vaadin spring-boot应用程序嵌入到另一个HTML应用程序中？

任何提示都非常感谢！克里斯托弗

Answer 1

幸运的是，Vaadin论坛中的某个人给了我一个缺失的链接。我忘了在独立的HTML中添加一些JavaScript：

    <script>
        XMLHttpRequest.prototype._originalSend = XMLHttpRequest.prototype.send;
        var sendWithCredentials = function(data) {
            this.withCredentials = true;
            this._originalSend(data);
        };
        XMLHttpRequest.prototype.send = sendWithCredentials;
    </script>

这有帮助，但字体没有被CORS问题正确加载，所以我删除了自定义Vaadin CORSServlet并添加了spring-boot提供的基于过滤器的CORS支持（如in this blog文章所述）。

我的示例现在运行正常，演示应用程序功能齐全，字体加载并正确使用。

请查看https://github.com/flexguse/vaadin-html-embedding以获得完整的示例。

干杯，克里斯托弗

将Vaadin spring-boot应用程序嵌入到HTML中

1 个答案: