Why does Steam api refuse Angular calls?

Asked

Viewed 241 times

6

I am simply trying to feed my application data from the Steam Api. Let’s take this example: http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=440&format=xml

Paste into the browser and it will work as due.

But when I do in the AngularJS :

function getData(){
    return $http.get('aquela url')
            .then(function(response){
                return response.data;
                })
            .catch(function(err){
                console.log(err);      
            });
}

He always falls in the catch, with statuscode:0 as if the server was actively refusing my request.

What am I doing wrong?

angularjs http request

  • In Chrome or Firefox, what the tab Rede of Ferramentas de Desenvolvimento say about the request? And the console?

  • No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. I know it’s a Cross Domain issue, but how do I fix it when I can’t touch the Steam Api? and another one I’m doing a get, and not a post

  • I don’t think it’s possible. Browsers implement this policy for security reasons. Bypassing it would be a security problem.

  • So Steam makes an api that can’t be consumed. That doesn’t make much sense

  • Now that I’ve noticed, where’s your key API? Without it, you won’t be accessing.

  • 1

    This url does not require apikey, so if you paste it into the browser, it will work. For the other calls I have the proper apikey. Is there another way, or a "functional" library to access the Steam api? I’m testing Steamkit2 but without much success

Show 1 more comment

2 answers

2

To solve this problem you have to use a server as "proxy".

That is: For this request to work, the same has to be done from a server and not from a browser.
I give an example of PHP because it is the easiest, however this example serves well to understand what to do.
ps: I haven’t written php for a while

if (!empty($_GET['steamCall'])) {
    echo file_get_contents('http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=440&format=xml');
}

Then, on your controller instead of directly calling the Steam API, call your server path with ?steamCall=true. Your server goes to the Steam API url and returns to your application what steamAPI responded to your server call.

1

You must have a problem with Cors (https://pt.wikipedia.org/wiki/Cross-origin_resource_sharing).

In a well summarized explanation, when you try to access something with ajax outside the source domain (as is the case of your site accessing Steam) it makes a previous request with option pro address method "asking" if your application can make the actual request.

I’m not familiar with the Steam api, but they must not have enabled Cors. Since Cors is a browser resource (Implemented in the client browser), requests from your server are not affected, that is, if you make a request with any programming language from your server, Cors are ignored.

Making a direct request via angular will not roll unless Steam enables Cors. What can be done in this case is to use something on your server to make an exchange between the angular and the api you want to access.

There are proxys for Cors made in various languages. I don’t know which one you’re using, but if you search in google Cors proxy vc will find implementations in various languages.

Browser other questions tagged angularjs http request

You are not signed in. Login or sign up in order to post.