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
Related
I need to call a web service and pass it xml and authentication data. Here is what i came up with so far:
var xml ="<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>"
+ "<soapenv:Header/>"
+ "<soapenv:Body>"
+ "..."
+ "</soapenv:Body></soapenv:Envelope>";
var config = {
method: "POST",
url: 'http://....wsdl',
data: xml
};
$http(config).
then(function (data, status, xhr) {
$scope.MyID = data;
}, function errorCallback(xhr) {
//print error to console.
console.log(xhr.responseText);
});
I need to figure out how can I pass in username and password. And also the above gives me an error:
XMLHttpRequest cannot load http://....wsdl. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:' is therefore not allowed access.
The strange part is that when I called the service from .NET the same way, there was no issue with access-control-allow-origin
Since you are using angular for http requery use any of the following code to pass authentication.
app.run(['$http', function($http) {
$http.defaults.headers.common['Authorization'] = /* ... */;
}]);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common['Authorization'] = /* ... */;
}])
Try this Library hope it helps
https://github.com/andrewmcgivery/angular-soap
I was trying to implement facebook integration, I got this error:
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Fchefin.com%2Fauth%2Ffacebook%2Fcallback&client_id=865410220269534. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://chefin.com' is therefore not allowed access.
when I call auth/facebook URL on button click.
$scope.facebookLogin = function() {
$http({
url: '/auth/facebook',
method: 'GET',
}).success(function(response) {
});
};
It seems the /auth/facebook is having a redirect request. So instead of AJAX can you try:
$scope.facebookLogin = function() {
window.location.href = "/auth/facebook";
}
Using Angular, I'm trying to pass in HTTP headers with the request, “App-Id” and “App-Key” to get data from this API.
I tried setting the headers like this:
$http.defaults.headers.common["App-Id"] = '5a3d8b8d';
$http.defaults.headers.common["App-Key"] = '738e9aca62e7465446b7be8fe4219ffa';
but I got a Response for preflight is invalid error.
http://jsfiddle.net/9Ymvt/4573/
Adding Headers to an $http Request on a Per Request Basis
To add headers to a $http request on a per request basis, add them to the headers property of the $http config object.
var xheaders = {};
xheaders["App-Id"] = '5a3d8b8d';
xheaders["App-Key"] = '738e9aca62e7465446b7be8fe4219ffa';
var xurl = 'https://uk.bookingbug.com/api/v1';
var configObj = { method: 'GET',
url: xurl,
headers: xheaders
};
$http(configObj)
.then(function onFulfilled(response) {
console.log(response);
vm.headers = response.config.headers;
vm.data = response.data
}).catch( function onRejection(errorResponse) {
console.log("Error: ", errorResponse.status);
console.log(errorResponse);
vm.error = errorResponse;
})
;
The code was getting pre-flight errors because it was using the incorrect URL. The correct base URL is https://uk.bookingbug.com/api/v1 which supports App-Id headers and CORS.
The DEMO on JSFiddle.
I do not think this is a complete answer to your question, but here is what I have in my project:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
// code for routes
});
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
This solves my problem with CORS. If you want to do another type of header, you probably can find your answer here.
Preflight errors are related to CORS. You might want to look at rack-cors to enable cross-site api calls via javascript. There is a manual configuration here: https://gist.github.com/dhoelzgen/cd7126b8652229d32eb4
I'm trying to access an API with AngularJS but I get the following error:
XMLHttpRequest cannot load http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://purepremier.com' is therefore not allowed access.
This is my code for the service:
angular.module('PremierLeagueApp.services', []).
factory('footballdataAPIservice', function($http) {
var footballdataAPI = {};
footballdataAPI.getTeams = function() {
$http.defaults.headers.common['Auth-Token'] = 'token';
return $http.get('http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK');
};
return footballdataAPI;
});
I use an authentication token (api key) to access the api, but according the API owner this API key header is not sent or recognized. Do you have any idea how I can adapt the code to make this work? thanks!
You should hide that API key before posting on a public site such as this. I would advise you regenerate your key (if possible) just in case - better safe than sorry.
Assuming your site url is 'http://purepremier.com' from the error message, the API should add a 'Access-Control-Allow-Origin' header with your site URL to allow you access. Have a look here for more information.
This is not directly related to your problem, but I notice you are setting $http defaults every time getTeams() is called. You should either set this outside of the actual function call (preferably in a run block), or just send the GET request with that header specifically applied. As the API key is specific (I assume) to that call, you may not want to be sending it to anyone and everyone, every time you make a HTTP request.
Change your factory code like this:
factory('footballdataAPIservice', function($http) {
return {
getTeams: function(){
return $http({
url:'http://www.football-data.org/alpha/soccerseasons/398/leagueTable',
headers: { 'X-Auth-Token': 'your_token' },
method: 'GET'
}).success(function(data){
return data;
});
}
}
});
Inject factory in your controller and retreive the data:
.controller('someController',function(footballdataAPIservice,$scope){
footballdataAPIservice.getTeams().then(function(data){
$scope.teams=data;
console.log($scope.teams)
});
});
Here is the working plunker
You change the Auth-Token To Authorization
$http.defaults.headers.common['Authorization'] = 'token';
Because token is send via headers using Authorization
try jsonp
angular.module('PremierLeagueApp.services', []).
factory('footballdataAPIservice', function($http) {
var footballdataAPI = {};
footballdataAPI.getTeams = function() {
$http.defaults.headers.common['Auth-Token'] = 'token';
return $http.jsonp('http://www.football-data.org/alpha/soccerseasons/398/leagueTable?callback=JSON_CALLBACK');
};
return footballdataAPI;
});
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