We Keep Coding

GetAddress.io and 'No Access Control Allow Origin' error

I'm trying to use getAddress.io, and while the syntax is very simple, I'm trying to write my backend management that can get whitelisted domains and usage etc.
So here is my call in jQuery:
$.ajax({
url: " https://api.getAddress.io/v2/usage",
context: document.body,
method: "GET",
data: {"api-key": getAddressAPIKey}
}).done(function(results) {
$("div.usage").append(results);
});
All seems to be up to scatch. However it returns the following error:
Failed to load https://api.getaddress.io/security/ip-address-whitelist?api-key=[apikey]: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://admin.awme.local' is therefore not allowed access.
What am I doing wrong? I understand what the error is about as I've written my own APIs but this is a public API that I obviously dont have control over - and so therefore I cannot modify their code to allow me access. This is a paid for service so I should just be able to query it and get my data back. Why am I getting this error?

You need to whitelist either your domain(if you are accessing the API from client), or your server IP if using backend.
https://getaddress.io/Documentation#domain-whitelist
Just make a simple post request with you admin-key(NOT API KEY) the params(NOT IN BODY) and your domain name in the body and set Content-Type to application/json.
Here is an example request with the response using postman.

The problem is that the API has CORS set up. Try adding dataType: "jsonp" as a parameter in your AJAX request. If that doesn't work, try using something like https://cors-anywhere.herokuapp.com/

You cannot query directly from the browser, you have to query through a proxy like nginx or apache. You throw your request to the proxy and the proxy passes them to the other public API

May be the return type from the controller was not provided , This error mostly occurs when
return type is not mentioned or kept as dynamic and if the return type object contains any child elements .Just mention a proper return type.

The URL in your error message:
'https://api.getaddress.io/security/ip-address-whitelist?api-key=[apikey]'
..is not related to the code you have provided.
I assume there is more code in in your page that uses the above URL?

Did you read its document? I'm not familiar with this getAddress.io, but it seems you have to add your domain and IP to its whitelist.
Checkout Domain Whitelist and IP Address Whitelist

`No Access-Control-Allow-Origin` header is present - AngularJS

So, when I looked up the error, I see mostly it has something to do with with the webservice.
The problem is that I cant touch the webservice. However, using Postman extension on chrome it returns data just fine. So, i tend to believe that there is something wrong on frontend.
Also, Im using angular and rather at beginner's level, so I might be missing something trivial.
.factory('forecast', ['$http', function($http){
return $http.get('https://link')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}
]);

You will always get the Access-Control-Allow-Origin error if the webservice you are trying to access via REST doesn't have that header set for the response you are aiming to get.
However, most of the times, you can get around it by making a Server -> Server request instead of a Client -> Server (AJAX) request.
For example, if you are using NodeJS as a backend and make the request from there, then send the response back to your client via Node, you should be fine.
EDIT: Also, as stated in the comments (forgot that, thanks), AngularJS's $http service also exposes a $http.jsonp method using which you can get around that. However that only works if the webservice you are trying to access also exposes the information as JSONP in their API.
Documentation on $http.jsonp

AngularJS - $http get returns error with status 0?

I've an AngularJS application in which I'm trying to get an XML data with $http get from a server say http://example.com/a/b/c/d/getDetails?fname=abc&lname=def (this when accessed manually by entering the link in a browser shows a tree structure of the XML file).
When I run the application the data from that link is not fetched. Instead its showing an error with status 0.
//url = http://example.com/a/b/c/d/getDetails?fname=abc&lname=def
$http.get(url).success(function (data){
alert("Success");
deferred.resolve(data);
}).error(function (data, status){
console.log("Error status : " + status);
});
I'm not sure why the $http.get fails and goes to the error function returning status 0.
But if I pass an URL to the local server which has a JSON object, it works.
Is the problem because of me trying to access the XML file from a different domain(CORS issue?) or something else?
Please help me out!

You have HTTP access control (CORS) issues .
The server answering your REST requests MUST include the headers specified by CORS in order to allow Angular to consume properly the response. Essentially this means including the Access-Control-Allow-Origin header in your response, specifying the servers from where the request comes from, that are allowed. (ref)
There is directive Angular allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing Angular templates are safe.

yes you got it right, its because default content-type for $http is “application/json” if you want to change the request data or response data you can change it with the help of tranformRequest and tranformResponse. you can find more information on it here
also i find an article on implementation of tranformRequest change post data from json to form post in angularjs

Angularjs http.get failure (but I see the data was returned)

I'm walking thru the Angularjs phones tutorial and want to get the phones JSON from a remote server.
$http.get('http://myserver.com/phones.json').success(function(data) {
$scope.phones = data;
});
This failed due to CORS, I was sending an OPTIONS not a GET request, so I added this first line to the controller
delete $http.defaults.headers.common['X-Requested-With'];
I can see now in Charles that a GET not OPTIONS request is being made to myserver.com, and that the phones JSON is in the response. But the http.get is still failing with status 0 and 'data' is null.
Not sure what to try next. Any insights appreciated.

It should not be making an OPTIONS request for a GET, so that sounds right. I think what you want to do is:
$http.get('http://myserver.com/phones.json').then(function(data) {
$scope.phones = data;
}, function(err) { alert('Oh no! An error!'});
I think you want to use then(), which takes two functions as arguments — the first for success, and the second for error. $http.get() returns a promise which is acted upon by then().
Also, you probably want to use $resource instead of $http. It provides a higher level of abstraction, and allows for a more reusable style, http://docs.angularjs.org/api/ngResource.$resource
EDIT:
Check out the angular debug tool here. It shows you what is available in scopes, and shows performance data.

Well, if you are making a cross domain request, it is right to make a OPTION request as a pre-flight request to know if you are allowed to.
If the CORS fails your browser will receive the data but it'll throw an error.
So, either you put your html in the same domain or add the CORS to your backend (which is more difficult).

Here's a good tutorial which implements cross-domain GETS using the $http.jsonp method. No hacks to the headers.
http://net.tutsplus.com/tutorials/javascript-ajax/building-a-web-app-from-scratch-in-angularjs/

jQuery JSONP request causing TFL API to throw 400

I'm using jQuery .getJSON to get data from TFL's (transport for london) API.
However adding the ?callback=? parameter to the request causes the API to throw a 400 (Bad Request) error because it is very strict about what parameters it accepts. I.E the api can't recognise '?callback' as a valid parameter and therefore freaks out.
Is there another completely different way of doing this? Somehow getting the api response and parsing it myself for example. I'm new to JS and jQuery so apologies if I'm missing something super obvious!
var busStopAPI = 'http://countdown.api.tfl.gov.uk/interfaces/ura/instant_V1?StopCode1=56094&VisitNumber=1&ReturnList=StopCode1,StopPointName,LineName,DestinationText,EstimatedTime,DirectionId';
$.getJSON(busStopAPI, this.busStopSuccess).fail(this.busStopFailure);
p.s. I've tried the other .ajax() data types but they all throw 'Access-Control-Allow-Origin' errors.

You are trying to add "callback" because you want to use JSONP, right?... and you want to do that because if you don't you get a cross-domain error, right?
I would suggest to create a local web service proxy in your server that calls TFL's api and supply data to your UI. In that way you do not have to use JSONP and do not have to worry about cross-domain issues. (more info)
FYI, there are other approaches, but I personally prefer a proxy service when the api does not support JSONP callbacks.
Hope it helps.