Embedding Vaadin Spring-Boot-Anwendung in HTML

Ich habe diese Frage in der Vaadin Forum bereits geschrieben, leider habe ich keine Antwort erhalten - vielleicht liegt die Antwort der Frage irgendwo zwischen Spring-Boot und Vaadin.Embedding Vaadin Spring-Boot-Anwendung in HTML

Derzeit habe ich Schwierigkeiten, eine Vaadin-Anwendung in eine HTML-Seite einzubetten.

Was ich benutze:

Vaadin 7.6.6 
vaadin-spring 
spring-boot 1.3.5.RELEASE

Um CORS in Kombination mit Feder Boot zu ermöglichen, angepasst ich Sami's Blog entry und erstellt das folgende benutzerdefinierte 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(".*"); 
    } 

}

Zusätzlich fand ich eine Dokumentation über Spring-Boot und CORS, so fügte ich diese Feder-Konfiguration:

Mein HTML sieht wie folgt aus:

<?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>

Mein Problem ist die Anwendung initally geladen, aber einige Symbole fehlen, und wenn ich eine Aktion im appliction auslösen, also eine Dropbox öffnen, dann ist die Anwendung nicht in der Lage zu Schließen Sie die Verbindung zur Spring-Boot-Anwendung an. Fehlermeldungen wie folgt aussehen:

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.

Gibt es jemanden da draußen, die eine Vaadin feder Boot-Anwendung in eine andere HTML-Anwendung einbetten verwaltet?

Jeder Hinweis wird sehr geschätzt! Christoph

Quelle

2016-07-01 flexguse

Für eine bessere Diskussionsgrundlage habe ich eine Demo-Anwendung, die auf GitHub https://github.com/flexguse/vaadin-html-embedding gefunden werden kann. Leider habe ich bisher keine Fortschritte gemacht. – flexguse

glücklicherweise gab mir jemand im Vaadin Forum den fehlenden Link. Ich habe vergessen, einige JavaScript in der Standalone-HTML hinzuzufügen:

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

Das half, aber die Schriften nicht richtig von CORS Problemen geladen wurden, so dass ich entfernte den benutzerdefinierte Vaadin CORSServlet und hinzugefügt, um die Filter auf der Grundlage CORS von Frühjahrs- unterstützten boot (wie erklärt in this blog Artikel).

Mein Beispiel läuft jetzt ordnungsgemäß, die Demo-Anwendung ist voll funktionsfähig, Schriftarten werden korrekt geladen und verwendet.

Bitte werfen Sie einen Blick auf https://github.com/flexguse/vaadin-html-embedding, um das voll funktionsfähige Beispiel zu erhalten.

Cheers, Christoph

Quelle

2016-07-12 19:56:57 flexguse

Embedding Vaadin Spring-Boot-Anwendung in HTML

Antwort

Verwandte Themen