I am a novice to Angularjs and tried to create a remote service (located on
"http://dev.testmyserver2";) for using in various applications (located on "
http://dev.testmyserver";).
This service retrieves various data about a user by using Colfusion and an
Oracle database. It works perfectly when I launch the application directly
in the browser. Nevertheless when I tried to call the function of this
service (defined in the factory) from another application (thanks to a
dependency called in the main module of this application), the http GET is
modified in OPTIONS (visible in firebug) and I cannot retrieve the data
(the status code of the http request is O). The function is correctly
called (an alert "Function correctly called" or console.log from this
function is correctly called), but no data of the person is retrieved.
I think that it's *a problem of Cross domain*. But I do not know how to
solve it.
Here a little code:
- *THE REMOTE SERVICE* with functions for retrieving data from a database
- MODULE - appRemoteService.js:
var app=angular.module('RemoteService', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
// disable IE ajax request caching
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
// Create the routes
$routeProvider.when('/home',
{
templateUrl: 'template/allPersons.html',
controller: 'ctrlPersons'
})
.when('/documentation',
{
templateUrl: 'template/documentation.html',
controller: 'ctrlDocumentation'
})
.otherwise({redirectTo:'/home'});
});
app.controller('ctrlPersons', function ($scope, FactoryRemoteService){
FactoryRemoteService.getUserFromLogin("test").success(function(personInfo){
alert(personInfo["VALUES"][0]["FIRSTNAME"]);
});
});
- FACTORY - appFactoryRemoteService.js:
app.factory('FactoryRemoteService', function($http){
var factory={};
factory.getUserFromLogin=function(uid){
Alert("Function correctly called");
return
$http.get('http://dev.testmyserver2/myapp.cfc?method=getUserFromLogin&login=' +
uid);
};
return factory;
})
- *MY APPLICATION*:
- MAIN FILE - index.html:
<title>My app</title>
<link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="lib/css/bootstrap-3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/select.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="spacer navbar">
<h1 class="nav nav-pills navbar-left">MY APP</h1>
<ul class="nav nav-pills navbar-right"
data-ng-controller="NavbarController">
<li data-ng-class="{'active':getClass('/all-contacts')}"><a
href="#/all-contacts">All contacts</a></li>
<li data-ng-class="{'active':getClass('/add-contacts')}"><a
href="#/add-contacts">Add contacts</a></li>
</ul>
</div>
<ng-view></ng-view>
</div>
<script src="lib/js/angular.min.js"></script>
<script src="lib/js/angular-route.min.js"></script>
<script src="lib/js/angular-sanitize.min.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app/app.js"></script>
<script src="app/appService.js"></script>
<script src="http://dev.testmyserver2/app/appRemoteService.js";></script>
<script
src="http://dev.testmyserver2/app/appFactoryRemoteService.js";></script>
</body>
- MODULE - app.js:
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap',
'RemoteService']);
// register the interceptor as a service
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
// On request success
request : function(config) {
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError : function(rejection) {
//console.log(rejection); // Contains the data about the error on the
request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response : function(response) {
//console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failure
responseError : function(rejection) {
//console.log(rejection); // Contains the data about the error.
//Check whether the intercept param is set in the config array.
//If the intercept param is missing or set to true, we display a modal
containing the error
if (typeof rejection.config.intercept === 'undefined' ||
rejection.config.intercept)
{
//emitting an event to draw a modal using angular bootstrap
$rootScope.$emit('errorModal', rejection.data);
}
// Return the promise rejection.
return $q.reject(rejection);
}
};
}]);
app.config(function($routeProvider, $httpProvider){
// disable IE ajax request caching
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
// Add the interceptor to the $httpProvider to intercept http calls
$httpProvider.interceptors.push('HttpInterceptor');
$routeProvider.when('/all-contacts',
{
templateUrl: 'template/allContacts.html',
controller: 'ctrlContacts'
})
.when('/view-contacts/:contactId',
{
templateUrl: 'template/viewContact.html',
controller: 'ctrlViewContacts'
})
.otherwise({redirectTo:'/all-contacts'});
});
app.controller('NavbarController', function($scope, $location){
$scope.getClass=function(path){
if($location.path().substr(0,path.length) == path){
return true;
}else{
return false;
}
}
});
app.controller('ctrlViewContacts', function ($scope, $routeParams,
RemoteServiceFactory){
$scope.contact = null;
// CALL OF THE REMOTE SERVICE
RemoteServiceFactory.getUserFromLogin("test")
.success(function(personInfo){
alert(personInfo["VALUES"][0]["FIRSTNAME"]);
})
.error(function(personInfo, status){
alert(status);
});
});
After several search on various forums I tested some solutions, but the
problem is always present.
For instance I tried to add:
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
//Remove the header used to identify ajax call that would prevent CORS from
working
delete $httpProvider.defaults.headers.common['X-Requested-With'];
OR
//Reset headers to avoid OPTIONS request (aka preflight)
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
Could you please help me to find a solution to solve this problem?
Many thanks in advance for your reply
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
