its MIME type (“application/json”) is not a valid JavaScript MIME type

Question

I am trying to call API through below code. but my browsers are giving the same error and no response is getting from server.

And my API is working fine I have tested through postman. I dont know where I am getting wrong

I have also tried to put some header content type

application/json, application/x-javascript , application/javascript, text/json

function send(text) {


    $.ajax({
        url: 'http://localhost:5005/conversations/default/respond',
        type: 'POST',
        dataType:'jsonp',
        headers: {
            'Content-Type': 'application/javascript'
        },
        data: //JSON.stringify({
            {
            "q": text
        },//),
        success: function (data, textStatus, xhr) {
            console.log(data);

            if (Object.keys(data).length !== 0) {
                for (i = 0; i < Object.keys(data[0]).length; i++) {
                    if (Object.keys(data[0])[i] == "buttons") { //check if buttons(suggestions) are present.
                        addSuggestion(data[0]["buttons"])
                    }
                }
            }

            setBotResponse(data);

        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('Error in Operation');
            setBotResponse('error');
        }
    });

Maybe you need to ```dataType: 'json'``` instead of ```dataType: 'jsonp'``` and Content-Type: application/json — Timofey Goncharov, May 08 '19 at 11:32
Do you have to use JSONP ? I'd rather use normal JSON and fix cross origin issues with actual cross origin headers instead of by using JSONP instead of JSON. On old servers/operating systems, I did have to add 'application/json' to the MIME type list to actually be able to use json as well. So make sure both your clients and server know what your MIME type means if you plan to use jsonp or json on an old system. — Shilly, May 08 '19 at 11:34
The returned format for a JSONP call is not JSON but JavaScript. (JSONP = JSON with padding, while padding means a JS function wrapper to load the response JSON into a local or global variable) — feeela, May 08 '19 at 11:37
@Shilly I used json too but it is giving me " CORS header ‘Access-Control-Allow-Origin’ missing" and "CORS request did not succeed" — sheel, May 08 '19 at 12:15
@sheel That's exactly what I mean with ` fix cross origin issues with actual cross origin headers`. Just look up CORS javascript in your favourite search engine or here on SO and implement that so you can use normal JSON and the problem disappears. JSONP was a solution to the cross origin problem before we could actually configure CORS correctly, but in these days it's mostly obsolete. — Shilly, May 08 '19 at 12:17
@Shilly Thank you but can you tell me how to configure it. I am finding lil bit complicated. — sheel, May 08 '19 at 12:34
@sheel It can be rather complicated, so other tutorials will explain it way better. In short: On the server that responds to the call, the API, you have to configure the response headers so they return `Access-Control-Allow-Headers` with the value true. and `Access-Control-Allow-Origin`, containing the value of the domain your client is making the requests from. You also have to make sure the API actually allows HEAD requests to be made. Depending on the server, you might need to add `Access-Control-Allow-Credentials` as well. — Shilly, May 08 '19 at 12:41

score 2 · Answer 1 · answered Sep 23 '19 at 12:09

I had this same problem and in order to avoid this error or CORB error this is how I set my AJAX call:

$.ajax({
    url: 'http://api.test/blablabla', 
    type: 'GET',
    headers: {'Access-Control-Allow-Origin':'*'}, // <-------- set this
    dataType: 'jsonp', // // <-------- use JSONP
    success: function(data){
        console.log(data);
    }
});

I choose this answer after reading this.

its MIME type (“application/json”) is not a valid JavaScript MIME type

1 Answers1