Hi forum,
currently I’m having a hard time embedding a Vaadin application into an HTML page.
What do I use:
- Vaadin 7.6.6
- vaadin-spring
- spring-boot 1.3.5.RELEASE
To enable CORS in combination with spring-boot, I adapted Sami’s Blog entry https://vaadin.com/blog/-/blogs/using-cors-with-vaadin and created the following custom CORS servlet:
[code]
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(".*");
}
}
[/code]Additionally I found some documentation about spring-boot and CORS, so I added this Spring configuration:
[code]
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();
}
}
[/code]My HTML looks like this:
[code]
<?xml version="1.0" encoding="UTF-8" ?> Embedding a Vaadin Application in HTML PageEmbedding a Vaadin UI
This is a static web page that contains an embedded Vaadin application. It's here:
You have to enable javascript in your browser to
use an application built with Vaadin.
Please view the page source to see how embedding works.
[/code]My problem is the application is initally loaded, but several icons are missing and if I trigger an action in the appliction, i.e. open a dropbox, then the application is not able to do the connect to the spring-boot application. Error messages look like this: [code] 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. [/code]Is there anybody out there who managed to embed a Vaadin spring-boot application into another HTML application?Any hint is highly appreciated.
Christoph