javascriptjsonpcross-origin-read-blocking

CORB when using JSONP

I am trying JSONP. I have a HTML like below:

<html>
<head>
<title>JSONP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    
    <script src="js/main.js"></script>
    <script src ="https://truthsearcher83.000webhostapp.com/players_json.php?callback=showPlayers"></script>
    
</body>
</html>

My main.js file is :

function showPlayers(data){
    console.log(data);
}

My php file is :

<?php

$json_obj = '{

    $json_obj = '{"sachin" :{"country":"India" ,"age":36 , "role":"bat"},'.
    '"sourav" :{"country":"India" ,"age":37 , "role":"bat"},'.
    '"pointing" :{"country":"Aus" ,"age":56 , "role":"bowl"},'.
    '"gilchrist" :{"country":"Aus" ,"age":16 , "role":"wick"}}';
echo var_dump($json_obj);
echo 'showPlayers('.$json_obj.')';
            
  ?>

I am hosting the php file at https://truthsearcher83.000webhostapp.com/players_json.php

I am getting this error in my console and my console.log is not showing anything .

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://truthsearcher83.000webhostapp.com/players_json.php?callback=showPlayers with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I have just started learning Ajax and JSONP and I understand JSONP takes care of Cross Origin requests like this. So why am I getting this error? Is it something to do with the server?

Solution

  • https://stackoverflow.com/a/24528549/9265743

    header('Access-Control-Allow-Origin: *');
header('Content-Type: application/javascript');

    with reference to this post try setting correct MIME type in the server side. Also, try removing the var_dump in PHP, this duplicates the object in the script tag