http://here ip address :8080/hospital/user/profile
this is my server link which provides a data but is fails to get data in my angular controller console gets the following error
XMLHttpRequest cannot load http://ip address of server:8080/hospital/user/profile. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
ctrl.$inject = ['$location','$scope', '$http', '$rootScope'];
function ctrl($location,$scope, $http, $rootScope){
$scope.reg = function(){
alert("in the function");
$http.get('http://ipaddr:8080/hospital/user/profile').success(function(response) {
$scope.data = response.data;
alert("in the function data is"+response);
console.log(response);
}).error(function(response){
alert(" Fail to Access Data");
});
};
You need to add CORS filter in your Server
plz check http://enable-cors.org/server.html to configure your server
Related
I'm trying load this json file from remote url. In the beginning I was using $http.get function, but I was getting the next error message:
CORS 'Access-Control-Allow-Origin'
Now I am using JSONP, but nothing happens.
service.js file:
angular.module("elcomaApp").factory('ElcomaService', ['$http', function($http){
return $http({
method: 'JSONP',
url: 'http://vagalumewifi.com.br/timeline.json'
}).success(function(response){
return response.data;
}).error(function(err){
return err;
});
}]);
controller.js file:
angular.module("elcomaApp", []).controller('MainController', ['$scope', 'ElcomaService', function($scope, ElcomaService){
$scope.name = 'Natanael Santos';
console.log($scope.name);
ElcomaService.success(function(data){
$scope.elcomaData = JSON.parse(data);
var i = 0;
for (x in $scope.elcomaData){
console.log(i);
i++;
console.log(x.date);
}
}).error(function(data){
console.log(data);
});
}]);
app.js file:
var app = angular.module("elcomaApp", ['ngMaterial', 'ngRoute']);
I already hava read a lot of articles on stackoverflow, but no one work for me.
I'd suggest using $http.jsonp(url) method:
angular.module("elcomaApp").factory('ElcomaService', ['$http', function($http) {
$http.jsonp('http://vagalumewifi.com.br/timeline.json')
.success(function(data) {
console.log(data); // you can't `return` here...
}).error(function(err){
console.err(err);
});
}]);
Note: be warned that you can't expect that return in an async method has the same behavior as in a sync environment... :-)
Your original error is your clue. The endpoint server won't allow access from another domain.
CORS: Cross Origin Requests
You need to allow access on the endpoint server for the type of HTTP method you want to use (i.e. GET, POST, HEAD, ...) Additionally depending on what you're doing you may need to allow for an OPTIONS request, see Preflighted Requests in the MDN documentation above.
If you don't have access to that server you may need to do a work around by making $http call a script on your server that will fetch the file for you. I've done this before using PHP as a proxy and using PHP's file_get_contents function to grab files from other servers of a different domain.
I am trying to implement nexmoverify REST API for OTP implementation but response object comig null.I checked in Postman and able to get stringify object from of response object.
var app = angular.module('angularjs-starter', []);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
app.controller('MainCtrl', function($scope, $http) {
$scope.addNewChoice = function () {
console.log('aaaa');
$scope.res=$http.get("https://api.nexmo.com/verify/json?api_key=56a9b1af&api_secret=XXXXXX&number=919650298011&brand=stayuncle").
success(function (response) {
$scope.res = response.data;
}).
error(function (response){
console.log(response);
$scope.res = response.data;
});
};
Code Flow: code flow coming to error() section and then printing null in web console.
Error :
Response object coming null as well as getting this error in web console
XMLHttpRequest cannot load https://api.nexmo.com/verify/json?api_key=56X9b1af&api_secret=d3XXXX&number=91XX50298011&brand=stayuncle. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Can someone help me to solve this problem.
The error tells you the problem.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access.
The REST API server is not configured for CORS, therefore, you are not allowed to access that URL from any origin other than the https://api.nexmo.com/ domain. However, aren't you supposed to be using JSONP?
Reference on CORS
Reference on JSONP
i am trying to retreive some images from a flickr service this one.
Unfortunately, i have the following error:
XMLHttpRequest cannot load http://api.flickr.com/services/feeds/photos_public.gne?format=json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
Here's my code:
angular.module('myApp')
.service('getFlickrImages', function($http){
this.getData = function() {
delete $http.defaults.headers.common['X-Requested-With'];
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json'
});
}
});
angular.module('myApp')
.controller('MainCtrl', function ($scope, getFlickrImages) {
$scope.data = null;
getFlickrImages.getData().then(function(dataResponse) {
$scope.data = dataResponse;
});
});
Here's a Plunker if someone can help me
I finally found that chrome plugin:
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon
Install it, activate it and refresh the view.
It will a least let you work without that Access-Control-Allow-Origin issue.
It would be good if someone bring the fix but directly in the code...
I'm trying to consume a josn api (I'm very new to angularjs) and I'm getting the following error when trying to consume a json api using $http.get
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.
angularjs version: 1.3.8
browser: chrome/firefox/safari
enable CORS on the server side is not an option
already tried jsonp without success
the url works when I use the browser (I see the json response)
My Code:
angular.module('MyApp', [])
.config(function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
})
.controller('MainController', function($scope, $http) {
var url = "https://myurl";
$http.get(url)
.success(function(data){
console.log(data);
});
});
Thanks in advance!
I am trying to access the 8coupons api since i want to learn angularjs. But, whenever i try to hit the url it displays XMLHttpRequest cannot load http://api.8coupons.com/v1/getsubcategory. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
javascript:
var getjson = angular.module('dataapp',[]);
getjson.controller('controller',function($scope,$http)
{
var url = "http://api.8coupons.com/v1/getsubcategory?key=62a3ce5309039c70b7e74e759d0092282a50558b7af45ae1ca8c4bb1fa6bb4fcb16a7c896175dd5414746e2d407098dc";
$http.get(url).success(function(data,status,headers,config){
$scope.jsondata = data;
console.log(data);
}).error(function(data,status,headers,config){
});
});
You have to change your $http request as follows.
var url = "http://api.8coupons.com/v1/getsubcategory?key=62a3ce5309039c70b7e74e759d0092282a50558b7af45ae1ca8c4bb1fa6bb4fcb16a7c896175dd5414746e2d407098dc&callback=JSON_CALLBACK&time"+Math.random();
$http.jsonp(url)
.success(function(data) {
console.log("Success");
console.log(data[0].category);
}).error(function(data) {
console.log("Error");
});
Appended the additional param in the above URL which is required for JSONP call. Read the doc for more info https://docs.angularjs.org/api/ng/service/$http#jsonp
callback=JSON_CALLBACK
Demo : http://plnkr.co/edit/m9GW6y1JuiimbvKibQZ4
I just added www.corsproxy.com as a prefix to the url domain
e.g., http://www.corsproxy.com/api.8coupons.com/.....
my problem got fixed