Steam API Access-Control-Allow-Origin Issue

Question

A bit new to web programming and a bit confused on this. I have a basic express node.js webserver serving up a web site. I want to hand a gameid to a function and have it grab achievement information from steam using their web api that should be supported using the following REST api call:

https://developer.valvesoftware.com/wiki/Steam_Web_API#GetGlobalAchievementPercentagesForApp_.28v0002.29

I have a script file being served up I'm trying to do a request in a client side file like such.

function GetSteamGameAchievements(appid)
{
   var request = new XMLHttpRequest();

    request.addEventListener('load',function(){

       console.log(JSON.stringify(this.responseText));

    });

    request.open("GET","http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid="+ appid + "&format=json",true);

    request.send(null);
}

I get the following error

XMLHttpRequest cannot load http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=440&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I've read a bit about the error, but it seems to require server side code changes or something. Though all the server side code did something like:

// Add headers
app.use(function (req, res, next) {

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://api.steampowered.com');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});

Using Open Weather API which is the only other 3rd party REST api I've worked with something like the original code would be fine so I'm unsure why the Steam API isn't working right. Using Postman the query strings I'm submitting are fine, but there is something wrong with the securities when I do it in my client-side javascript ... but not Open Weather API ... i'm unsure why it works for one but not the other. Any help would be much appreciated, I've went over some similar threads but I think my noobishness is making it difficult for me to understand where I am going wrong and where the fix needs to be made exactly.

Answer 1

I've read a bit about the error, but it seems to require server side code changes or something.

Yes — by the service you want to read data from. i.e. by Steam.

You can't give yourself permission to read data from other people's sites using your visitors' browsers.

Since you can't alter Steam's servers, you'll need to fetch the data from Steam using your server instead of from the visitors' browsers.

Answer 2

You can easily 'cors' modules. use this command

npm install cors --save.

and add these lines in your app.js

var cors = require('cors');    
app.use(cors());

You don't need to get your code dirty.This is a cleaner way.

remove this

app.use(function (req, res, next) {

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://api.steampowered.com');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});