Trying to Cross-Site JSON request an API with JS (Angular)

Question

I have this:

          var profileURL = "http://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=5D1F1F5F31D68C060625DF544BF0E8C4&vanityurl=".concat(profileName);
        var profileJSON = $http.jsonp(profileURL)
          .success(function(data, status, headers, config) {
          console.log(jsonencode(data));
        //console.log(status);
         // console.log(headers);
         // console.log(config);
      })
      .error(function(data, status, headers, config) {
         // console.log(data);
          //console.log(status);
         // console.log(headers);
         // console.log(config);
      });

As you can see i'm trying to query the Steam servers. If I use $http.get instead of $http.jsonp I get the error about Cross-Site limitations. I've heard about CORS but have no idea how I go about implementing it in my scenario.

Any help on getting proper response data into a variable would be awesome.

Thanks so much

biofractal · Accepted Answer · 2015-01-22 09:09:53Z

If jsonp is not an option, and you don't mind putting in the extra work, then a good solution is to write a small reverse proxy.

In computer networks, a reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client as though they originated from the proxy server itself. wikipedia - reverse proxy

You can write your reverse proxy using any number of http server frameworks, for example Nancy for C# or a node.js server for javascript / coffeescript.

The important thing is to make sure the proxy runs under the same domain as your angular app. Now you can route all your ajax calls from your angular app through your proxy and, because its on the same domain, there are no cross-site issues.

The proxy is then free to make calls to whatever APIs you like, typically for me this will be my own custom API that encapsulates all my business logic and whatever calls I need to make to 3rd party APIs like, say, google translate. The job of the proxy is to make the calls and return the json to the angular app.

Doing things this way has the added bonus that your proxy can repackage the json from the 3rd party APIs to fit in with whatever standards you might have in your angular app. This is especially useful for dealing with errors from a variety of sources. Your proxy handles the error and passes back a standardised error package to the angular app.

In fact, experience has shown that once you have a proxy in place you start to find a whole lot of uses for it. Who, for example, would want to make a call from angular to an API that requires a secret API key? Doing that exposes the key right there in your client code ready for anybody to misuse. With a proxy all those details remain securely hidden on the server.

If you do go down the node.js route then consider using request for making your http calls as this provides explicit support for proxy-ing and piping requests/responses.

groseb · Accepted Answer · 2015-05-07 12:53:43Z

1

CORS must be enabled by the server. Since you don't own the server at steam, you can't enable CORS. Some public api services will send back jsonp if you simply append a callback onto the query string.

like this:

var profileURL = "http://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=PRIVATE_API_KEY&vanityurl=".concat(profileName).concat("&callback=callback");

edited May 7, 2015 at 12:53

groseb

691 silver badge6 bronze badges

answered Jan 20, 2015 at 7:50

Patrick Gunderson

3,29120 silver badges28 bronze badges

5 Comments

KriiV Over a year ago

&callback=callback what exactly does that do? Is that all I have to do or is that pointing to a function I have to create. (I'm new to this)

mcfedr Over a year ago

$http.jsonp will handle this for you

KriiV Over a year ago

I get this error: Uncaught SyntaxError: Unexpected token : it points to the : in the response: { "response": { "steamid": "76561198173814231", "success": 1 } } The : after "response"

Patrick Gunderson Over a year ago

Loops like steam doesn't want to send you JSONP. Is the feed you're trying to acces suppoed to be available for public consumption?

KriiV Over a year ago

I'm not really sure. The public main SteamAPI doesn't give me exactly what I need. It takes a steam ID, not a steam profile url.

Collectives™ on Stack Overflow

Trying to Cross-Site JSON request an API with JS (Angular)

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related