title: Loosly coupled ui written in javascript and hosted on port 8080, how do I communicate using json to my java application running on port 80
body: <p>This is largely a new area for me, so my question is more on helpful resources.</p>
  
  <p>I have an apache server running on port 80 that simply hosts a javascript application.</p>
  
  <p>This java application gets its data through rest calls made to a java application running in jetty on port 8080.</p>
  
  <p>For the front end I am using AngularJS. My request service looks like this:</p>
  
  <pre><code>(function(ng, app){
      "use strict";
      app.service(
      "questService",
      function( $q, $http, _, categoryService ) {
          function($q, _, $http){
              function getQuestsFromServer(){
                  $http({method: 'GET', url: 'http://localhost:8080/worldcraft/quests'}).
                  success(function(data, status, headers, config) {
                      console.log("SUCESS!! {status: " + status + " \nData:" + data + "}");
                  }).
                  error(function(data, status, headers, config) {
                      console.log("FAILURE!! {status: " + status + " \nData:" + data + "}");
                  });             
              }
          }
          return getQuestsFromServer : getQuestsFromServer;
      })
  })(angular, Worldcraft);
  </code></pre>
  
  <p>in the java application I have a service like this</p>
  
  <pre><code>@Singleton
  @Produces(MediaType.APPLICATION_JSON)
  @Path("worldcraft/quests")
  public class QuestbookService {
  
      private Questbook questbook;
  
      @Inject
      public QuestbookService(Questbook questBook) {
          this.questbook = questBook;
      }
  
      @GET
      @Produces(MediaType.APPLICATION_JSON)
      public List&lt;Quest&gt; getQuests() {
          return questbook.getQuests();
      }
  
  }
  </code></pre>
  
  <p>When using chrome to test this, I get the javascript exception: XMLHttpRequest cannot load <a href="http://www.myserver.com:8080/worldcraft/quests" rel="nofollow">http://www.myserver.com:8080/worldcraft/quests</a>. Origin <a href="http://www.myserver.com" rel="nofollow">http://www.myserver.com</a> is not allowed by Access-Control-Allow-Origin. </p>
  
  <p>After doing research, it seems the correct solution is using JSONP. But I haven't seen anything online that really helps me understand how to do this with the technology I Have in place.</p>
  
  <p>The java stack is using jetty, jackson, jersy, with guice to facade the servlets.</p>
  
  <p>The front end stack is using AngularJS to do the routing.</p>
  
  <p>The AngularJS platform is hosted on port 80 with a regular Apache server.</p>
  
  <p>any advice or tips would be nice, research topics would be preferred. Or an explanation of what I may be doing wrong.</p>