Access-Control-Allow-Origin


During the development of this website I ran into a common API error when working with web browsers.

XMLHttpRequest cannot load Origin [my_domain] is not allowed by Access-Control-Allow-Origin.

Typically this means content from Site B is not directly accessible from Site A. Usually javascript cannot directly communicate with a remote server from a different domain.

In hindsight, the Steam json data I was trying to pull from, would have been against their terms of service because my Auth key would’ve been public. So, what’s the solution? Call the API from your back-end and decode the JSON with PHP (or any server-side language).
<?php
$api = "http://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v0001/?key='YOUR_KEY'&steamid=76561198042341
$json = (file_get_contents($api));
$data = json_decode($json, true);
$games = $data['response']['games'];
?>