Embedding vaadin app in div element problem

Hi!
I’m trying to embed my vaading app in div element. Here is my html


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://localhost:8088/testChangeListener/VAADIN/themes/reindeer/favicon.ico" />
  <link rel="icon" type="image/vnd.microsoft.icon"
           href="http://localhost:8088/testChangeListener/VAADIN/themes/reindeer/favicon.ico" /> 
</head>

<body>
  <!-- Loads the Vaadin widget set, etc. -->
  <script type="text/javascript"
          src="http://localhost:8088/testChangeListener/VAADIN/vaadinBootstrap.js"></script>

  <!-- GWT requires an invisible history frame. It is   -->
  <!-- needed for page/fragment history in the browser. -->
  <iframe tabindex="-1" id="__gwt_historyFrame"
          style="position: absolute; width: 0; height: 0;
                 border: 0; overflow: hidden"
          src="javascript:false"></iframe>  

  <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: 300px; border: 2px solid green;"
       id="TestchangelistenerUI" 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("TestchangelistenerUI", {
	    "browserDetailsUrl": "http://localhost:8088/testChangeListener/",
	    "widgetset": "com.vaadin.DefaultWidgetSet",
	    "theme": "mystyle",
	    "versionInfo": {"vaadinVersion": "7.1.0.beta1"},
	    "vaadinDir": "http://localhost:8088/testChangeListener/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>

and here is my web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>testChangeListener</display-name>
	<context-param>
		<description>
		Vaadin production mode</description>
		<param-name>productionMode</param-name>
		<param-value>false</param-value>
	</context-param>
	<servlet>
		<servlet-name>Testchangelistener Application</servlet-name>
		<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
		<init-param>
			<description>
			Vaadin UI class to use</description>
			<param-name>UI</param-name>
			<param-value>com.example.testchangelistener.TestchangelistenerUI</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Testchangelistener Application</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

when I’m trying to load html I see this error
"XMLHttpRequest cannot load http://localhost:8088/testChangeListener
/?v-browserDetails=1&theme=mystyle&…%2Ftest.html&v-wn=TestchangelistenerUI-0.31296771322377026&v-1372228462121.
Origin null is not allowed by Access-Control-Allow-Origin. "
What am I doing wrong?

Hi,

Having the host part “http://localhost:8088/” in the URLs looks suspicious and might cause the same-origin violation problem.