Search code examples
phpjqueryjsonsteamsteam-web-api

JQuery $.getJSON from PHP file_get_contents on steamcommunity JSON


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 ?


Solution

  • 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.