Chrome Extension error when returning json: Resource interpreted as Script but transferred with MIME type text/json

Question

I am making a chrome extension that uses http://loopj.com/jquery-tokeninput/ to add tokens.

$(function() {
  $("#token").tokenInput("http://localhost/token/search", {
    preventDuplicates: true,
  });
});

In my php code I am returning a json encoded array (and the same function is used via the app itself and is working):

echo json_encode($token_array);
exit;

However the results are not being returned correctly and chrome reports the following error in the console:

Resource interpreted as Script but transferred with MIME type text/html

When I click the link the the source, it appears to be formatted correctly:

[
    {
        "id": "5",
        "name": "token1"
    },
    {
        "id": "3",
        "name": "token2"
    },
    {
        "id": "4",
        "name": "token3"
    }
]

Do I need to set headers in my php code? I tried:

header('Content-type: text/json');

which creates the following error:

Resource interpreted as Script but transferred with MIME type text/json:

and when I try

header('Content-type: application/json');

It doesn't seem to make the request. What am I doing wrong?

Answer 1

Should be text/javascript content type:

header('content-type:text/javascript');