Cross-domain $http request AngularJS

Question

I have simple website I'm building with AngularJS which calls an API for json data.

However I am getting Cross domain origin problem is there anyway around this to allow for cross domain requests?

Error:

XMLHttpRequest cannot load http://api.nestoria.co.uk/api?country=uk&pretty=1&action=search_listings&place_name=soho&encoding=json&listing_type=rent. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// localhost' is therefore not allowed access.

  searchByPlaceName: function() { 
        var url = baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'+encoding+type;
         return $http.get(url);
    }

It is up to api.nestoria.co.uk to allow CORS

Explosion Pills
– Explosion Pills

2014-03-20 22:11:06 +00:00
Commented Mar 20, 2014 at 22:11 — Explosion Pills
– Explosion Pills, Commented Mar 20, 2014 at 22:11

Explosion Pills · Accepted Answer · 2014-03-20 22:14:07Z

14

It seems that api.nestoria.co.uk does not allow CORS. It has to set the Access-Control-Allow-Origin header itself -- you have no direct control over that.

However, you can use JSONP. That site allows it via the callback query parameter.

$http.jsonp(baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'
    +encoding+type + "&callback=JSON_CALLBACK")

answered Mar 20, 2014 at 22:14

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

4 Comments

user1375096 Over a year ago

you need to supply a callback function to jsonp. $http.jsonp(url+"&callback=JSON_CALLBACK").success(function(data) { console.log(data); });

Michael Merchant Over a year ago

@huocp, your comment makes sense... However, I'm still getting the error Tom mentioned "Uncaught SyntaxError"

Wreeecks Over a year ago

@Tom change the API response format to JSONP as well. :)

karthik pamidimarri Over a year ago

@Explosion Pills If i used JSONP the response is not coming as JSON format . it's in the form js file in response

uiwarrior · Accepted Answer · 2014-03-20 22:30:56Z

2

Install Fiddler. Add a custom rule to it:

static function OnBeforeResponse(oSession: Session)
{
    oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
}

This would allow you to make cross domain requests from localhost. If the API is HTTPS make sure you enable 'decrypt HTTPS traffic' in fiddler.

Reference

-------------------- UPDATE

The response you are getting is JSON. Specifying JSONP as datatype would not work. When you do specify JSONP the return should be a function not JSON object.

JSONP

edited Mar 20, 2014 at 22:30

answered Mar 20, 2014 at 22:12

uiwarrior

1011 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Cross-domain $http request AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related