var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'World';
var states = $http.get('http://xyz.com/api/reference/1004') // This will be your published api url
.success(function(data){
console.log(data);
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="https://rawgit.com/jpillora/xdomain/gh-pages/dist/0.6/xdomain.js" slave="http://xyz.com/proxy.html"></script>
<!-- CREATE PROXY.HTML ON SERVER WHERE YOUR API IS HOSTED. PROXY.HTML IS AVAILABLE IN THIS PLNKR -->
<script src="app.js"></script>
</head>
<!-- for more info - https://github.com/jpillora/xdomain -->
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div>How to call published api from localhost or from other domain in angularjs directly without setting anything regarding CORS on site ..</div>
<br>
<p>I am using xdomain.js from <u>https://github.com/jpillora/xdomain </u></p>
<div>
A pure JavaScript CORS alternative/polyfill. No server configuration required - just add a proxy.html on the domain you wish to communicate with. This library utilizes XHook to hook all XHR, so XDomain will work seamlessly with any library.
</div>
</body>
</html>
/* Put your css in here */
<!DOCTYPE HTML>
<script src="//rawgit.com/jpillora/xdomain/gh-pages/dist/0.6/xdomain.js" master="*"></script>
<!-- Note: you have to publish this proxy.html on server where your api is so that when you try to access that api
from localhost or from other domain, cors will work perfactly fine using this proxy -->