How do I get the steam API to work?

Question

Let me start off with saying I just figured out how to use JQuery's "$.ajax()" just a few days ago. I've been able to read local .xml and .json files.

Also, I've figured out how to use the google maps API to import dynamic and static maps. (just following the google documentation)

Now, I had an idea to use steam IDs for a school project, but I keep getting this error:

XMLHttpRequest cannot load http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=[MY_SECRET_KEY]2&steamid=76561197960435530&relationship=friend. Origin http://local.mysite.com is not allowed by Access-Control-Allow-Origin. 

(I took out the key, and the generated key is suppose to allow access to http://local.mysite.com)

Here is my code:

    <script type="text/javascript">
        $.ajax({
            url: "http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=[MY_SECRET_KEY]&steamid=76561197960435530&relationship=friend",
            dataType: "json",
            success: function(data){
                console.log(data);
            },
            error: function(req,text,error){
                console.log(text);
                console.log(error);
                console.log("DIDN'T WORK!")
            }
        });
    </script>

Does anybody know what's going on? I can't seem to get this to work.

Answer 1

See this answer and the posts here. For more background visit mdn. Essentially you're running into a security issue where the browser won't allow you to make a request from http://local.mysite.com to http://api.steampowered.com.

Do you have access to a server? Instead of making a request like this: browser -> steampowered you can make a request like this browser -> your server -> steampowered.

You're going to want to create an endpoint on your server (so that it's in your domain) that you can send a request to, that will in turn send a request to steam powered.

What language / framework are you running and we can give you example code.