CODEWITHSUNDEEP
jqueryajaxparse-platform
Akshay Arora
Akshay Arora

Reputation: 1945

Access Control Allow Origin header missing on Parse app Call

I am making a web application that requires downloading of many JSON files and store them in localStorage once in a while( maybe a month). I am using Parse.com as Backend as a Service. I hosted my JSON on Parse.

My code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>

<script type="text/javascript">
    Parse.initialize("MY_APP_KEY", "MY_JS_KEY");
</script>

    <script>
        $.getJSON( "http://myappname.parseapp.com/1111.json", function( data ) {
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );
        });
    </script>

</head>
<body>

</body>
</html>

I get the following error:

Cross Origin Request Blocked: Access-Control-Allow-Origin header is missing.

But when I open it in my browser, it opens fine.

Why doesn't it work? Is there any possible solution for it?

Thanks.

Upvotes: 2

Views: 386

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Otherwise you can add callback=? to the url you are using as below which will get the jsonp type of data:

$.getJSON( "http://myappname.parseapp.com/1111.json?callback=?", function( data ) {
        var items = [];
        $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
        });

        $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
        }).appendTo( "body" );
});

UPDATE

$.ajax({
    url:'http://myappname.parseapp.com/1111.json',
    dataType:'jsonp',
    crossDomain:true,
    success:function( data ) {
        var items = [];
        $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
        });

        $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
        }).appendTo( "body" );
    },
    error:function(jqXHR,responseText,status){
     console.log(jqXHR);
    }
});

This is how you do it in ajax. If you face any issue check console as it will be logged

Upvotes: 1

Related Questions