JQuery $.getJSON from PHP file_get_contents on steamcommunity JSON

Question

I try to use http://steamcommunity.com/inventory/XXXXXXXXXX/753/6 to fetch JSON items.

I can't put the url in my $.getJson because there is a CORS « Access-Control-Allow-Origin » error. How can i bypass that if i don't want to allow CORS I read somewhere that it's possible to use PHP file_get_contents to redirect the json file.

Steamcommunity doesn't work with JSONP

var exercice = {

modules: {}
};

exercice.modules.ajax = (function () {

return {

    recupererJson: function () {
         initial= $.getJSON('proxy.php',function(data){
        })
            initial.done(function(donnes){
                var i = 0;

                $.each(donnes.descriptions,function(key,value){
                        $('tbody').append("<tr>");
                        $('tbody').append("<td>"+value.name+"</td>");
                        $('tbody').append("<td><img src=http://cdn.steamcommunity.com/economy/image/"+value.icon_url+" alt ="+value.name+"/></td>");
                        $('tbody').append("</tr>");


                    });
                    });
    },
    init: function () {
        exercice.modules.ajax.recupererJson();
    }
}})();

$(document).ready(function () {
exercice.modules.ajax.init();
});

Can someone help me ?

Possible duplicate of [jQuery.getJSON - Access-Control-Allow-Origin Issue](https://stackoverflow.com/questions/6396623/jquery-getjson-access-control-allow-origin-issue) — Tristan, Jun 01 '17 at 14:42
JSONP is not allowed on this website, so i didn't find my answer in this post either :/ — Tikroz, Jun 01 '17 at 14:46
If the website doesn't allow JSONP, and you have no control over that, you'll have to execute the call in PHP, because any reasonable browser will prevent you from doing it in the client side. — James Hay, Jun 02 '17 at 03:45

Viacheslav · Accepted Answer · 2017-06-02T07:30:24.147

If php.ini has allow_url_fopen=1 (http://php.net/manual/en/filesystem.configuration.php), which should be by default, then you can make such a php file:

<?php echo file_get_contents('http://steamcommunity.com/inventory/76561198033103987/753/6');

or

<?php readfile('http://steamcommunity.com/inventory/76561198033103987/753/6');

Otherwise if it is disabled and you cannot access php.ini, but you have CURL extension enabled, then you can do so:

<?php
$ch = curl_init();
curl_setopt($ch, 'http://steamcommunity.com/inventory/76561198033103987/753/6');
curl_setopt($ch, CURLOPT_HEADER, 0);
echo curl_exec($ch);
curl_close($ch);

See http://php.net/manual/en/function.curl-init.php

EDIT: Looking at your code it seems to me that there is only one issue here:

initial= $.getJSON('proxy.php',function(data){

should be

initial= $.getJSON('http://example.com/proxy.php',function(data){

You should use full URLs.

EDIT2: I tried this code and it worked fine for me.

http://127.0.0.1/test.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        var exercice = {
            modules: {}
        };

        exercice.modules.ajax = (function () {

        return {

            recupererJson: function () {
                 initial= $.getJSON('http://127.0.0.1/proxy.php',function(data){
                })
                    initial.done(function(donnes){
                        var i = 0;

                        $.each(donnes.descriptions,function(key,value){
                                $('tbody').append("<tr>");
                                $('tbody').append("<td>"+value.name+"</td>");
                                $('tbody').append("<td><img src=http://cdn.steamcommunity.com/economy/image/"+value.icon_url+" alt ="+value.name+"/></td>");
                                $('tbody').append("</tr>");


                            });
                            });
            },
            init: function () {
                exercice.modules.ajax.recupererJson();
            }
        }})();

        $(document).ready(function () {
            exercice.modules.ajax.init();
        });
    </script>
</head>
<body>
    <table>
        <tbody>
        </tbody>
    </table>
</body>
</html>

http://127.0.0.1/proxy.php:

<?php
header("Content-Type: application/json; charset=utf-8");
header("Access-Control-Allow-Origin: *");
readfile('http://steamcommunity.com/inventory/76561198033103987/753/6');

I added Content-Type header so that the proxy.php would form a more browser-friendly. Also Access-Control-Allow-Origin: * header should prevent CORS from blocking the ajax request if you open the test.html using file URI file:///C:/www/test.html.

So it works for me but only on Google Chrome, Firefox keep telling me CORS problem — Tikroz, Jun 02 '17 at 06:27
@Kryze, I tried it on both chrome and firefox, and firefox didn't throw any errors. The only way I get CORS error is when I open test.html directly using a file URI `file:///C:/www/test.html`. But it works fine when I open it through my local webserver via url `http://127.0.0.1/test.html`. — Viacheslav, Jun 02 '17 at 07:22
@Kryze, I may have found a solution for your issue. Try adding `header("Access-Control-Allow-Origin: *");` into proxy.php. You can see that in the updated code. — Viacheslav, Jun 02 '17 at 07:32

JQuery $.getJSON from PHP file_get_contents on steamcommunity JSON

1 Answers1