CORB when using JSONP

Question

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?

The error message cited in the question was due to the server returning the MIME type 'text/html' for a response that is actually a JavaScript document. So adding the 'Content-Type: application/javascript' response header is what fixed it — because that sets the MIME type to what the browser expects. Otherwise, if the type is 'text/html', the browser blocks it because that’s not the MIME type the browser expects for a JavaScript document — specifically it’s not what the browser expects for a document whose URL is used as the value of the src attribute of a script element. — sideshowbarker, Feb 10 '19 at 06:56
@sideshowbarker I'm dealing with this issue right now on an express server that uses the `res.jsonp` method, but the code for the endpoint doesn't set the `application/javascript` header. However, I wasn't getting the CORB warning when I was using jQuery's ajax jsonp data type, but now that I've removed jQuery and written my own JSONP logic, I'm seeing the CORB warning. Do you have any idea why this started happening, and how to get around it? I used the jsonp handler logic in this article: https://blog.logrocket.com/jsonp-demystified-what-it-is-and-why-it-exists/ — Uche Ozoemena, Aug 24 '20 at 13:01

score 1 · Accepted Answer · answered Feb 07 '19 at 09:08

1

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

answered Feb 07 '19 at 09:08

Varun Suresh Kumar

868
7
16

2

Thanks . Do you know why we need header('Access-Control-Allow-Origin: *'); even though we are using JSONP ? Doesnt that defeat the whole purpose of JSONP ? – Knownow Feb 07 '19 at 15:32

CORB when using JSONP

1 Answers1