As a newcomer to AngularJS, I am currently working on my first app. I have set up a backend Restful service in another system that cannot be modified. Here is the code for my service:
var MainService = angular.module('MainService', [])
MainService.factory('MainData', ['$http', function ($http) {
var urlBase = 'http://demoint:1234/rest.oms/basvc/barest';
var MainData = {};
MainData.getData = function () {
return $http.get(urlBase + '/0/usecases?generation=true&UseCase=0.0.3550d.a6000015');
};
console.log(MainData);
return MainData;
}]);
However, when I try to access the data, I encounter the following error message in my browser: XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. https://i.sstatic.net/rzA18.png
I have tried different solutions to bypass this issue without success:
- Adding the following option to Chrome (startup parameter): --disable-web-security
- Installing this extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Adding the configuration code below to my main app:
.config(['$httpProvider', function ($httpProvider) { $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.withCredentials = true; delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.headers.common["Accept"] = "application/json"; $httpProvider.defaults.headers.common["Content-Type"] = "application/json"; } ]);
Any suggestions on how to resolve this issue would be greatly appreciated.
https://i.sstatic.net/gFNEe.png
Thank you in advance! Fabio