Cross domain issue in calling a restful API using Angular JS

Question

I'm trying to access a restful API. This gives error. How to overcome this Cross domain issue?

The error is 'Access-Control-Allow-Origin' header is present on the requested resource

function Hello($scope, $http) {

$http.get('http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=atf6ya6bbz3v5u5q8um82pev').
    success(function(data) {
        alert("Success");
    }).
    error(function(data){
       alert("Error");
    });
}

This is my fiddle http://jsfiddle.net/U3pVM/2654/

Nix · Accepted Answer · 2014-03-05 19:54:28Z

5

A better way to do this (fiddle example) is to use $http.jsonp .

var url = 'http://api.worldweatheronline.com/free/v1/weather.ashx';
return $http.jsonp(url, {
    params: {
        callback: 'JSON_CALLBACK',
        q: 'London',
        format:'json',
        num_of_days: 5,
        key: 'atf6ya6bbz3v5u5q8um82pev'
    }
});

Notice the JSON_CALLBACK query string parameter I added. Behind the scenes angular uses that to setup its callbacks for you. Without it it will break.

answered Mar 5, 2014 at 19:54

Nix

58.8k31 gold badges154 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rathan · Accepted Answer · 2016-07-22 12:36:01Z

1

Use JSONP for escape Cross Domain

 var request_url = 'http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=atf6ya6bbz3v5u5q8um82pev&callback=JSON_CALLBACK';

$http({
  method: 'JSONP',
  url: request_url
}).success(function(data, status , header, config){
      alert('Success')
})
.error(function(data, status , header, config){
      alert('error')
});

edited Jul 22, 2016 at 12:36

Rathan

791 gold badge2 silver badges11 bronze badges

answered Jan 16, 2014 at 7:08

Anil Gupta

2,3994 gold badges25 silver badges31 bronze badges

2 Comments

Nix Over a year ago

There are two pieces to this method:JSONP and the callback you added to the end of the URL string. Please explain these details and I will give you +1.

Anil Gupta Over a year ago

@Nix JSONP is used for making cross domain request & callback is JSONP format in which sever should wrap the response data with callback method e.g if u send url param callback=my_result then on server side you need to generate response with wrapping callback value as function e.g my_result({"id", 1 });

Collectives™ on Stack Overflow

Cross domain issue in calling a restful API using Angular JS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related