Angular JS and Cross Origin Requests

Question

I am just playing around with angular JS and wiring it up to some restful web services I have implemented. I have moved onto using the $resource module provided by angular and have a simple question (I hope). In my code below I am making a request to a spring boot micro service I have written and am wanting to know the best way of accessing the URL.

So is there another way of calling the resource that is cross origin rather than having to write the line below. Is there something like /customer/greeting I could use but then how would I specify the different port as my angular app resides on localhost:8000?

http://localhost\:9001/customer/greeting //this is a spring boot application

My full code for the service.js is below this resides on localhost:8000 and is a node JS server.

'use strict';

/* Services */

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource) {
    return {
      pDetail: $resource('phones/:phoneId.json', {}, {
        query: {method: 'GET', params: {phoneId: 'phones'}, isArray: true}
      }),

      cDetail: $resource('http://localhost\:9001/customer/greeting', {}, {
        query: {method: 'GET'}
    })
    };
  }]);

When people normally implement do they have lots of http://balh blah when it goes cross origin? Is there a pattern that can be applied here?

Thanks in advance.

Answer 1

You can do this way:

Make function

var getCrossOriginUrl=function(portNo){
var crossOriginPath="http://localhost\:"
 return crossOriginPath+portNo+"/";
}

So now you can call this way:

$resource(getCrossOriginUrl(9001)+'customer/greeting',{}, {
        query: {method: 'GET'}
})