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

this largely new area me, question more on helpful resources.

i have apache server running on port 80 hosts javascript application.

this java application gets data through rest calls made java application running in jetty on port 8080.

for front end using angularjs. request service looks this:

(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); 

in java application have service this

@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<quest> getquests() {         return questbook.getquests();     }  } 

when using chrome test this, javascript exception: xmlhttprequest cannot load http://www.myserver.com:8080/worldcraft/quests. origin http://www.myserver.com not allowed access-control-allow-origin.

after doing research, seems correct solution using jsonp. haven't seen online helps me understand how technology have in place.

the java stack using jetty, jackson, jersy, guice facade servlets.

the front end stack using angularjs routing.

the angularjs platform hosted on port 80 regular apache server.

any advice or tips nice, research topics preferred. or explanation of may doing wrong.

your java application running on port 80 must write specific header response stream:

access-control-allow-origin: * 

since have 'static' content hosted on :80 site, have ask apache add header via mod_headers. create .htaccess file in root directory content:

<filesmatch ".*"> header set access-control-allow-origin "*" </filesmatch> 

where parameter defines caller uris individually separated pipe (|) sign, or * wildcard.

the reason you're getting error because browser implements 'same origin policy'.

this change needs implemented on source application.

you can read header reference here.