"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" on jsonp request

Question

I have a node server and an application from another server doing a AJAX jsonp request via jquery to get a json array of parameters, but when i request the data the jquery throws this error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

The request is sent and i get the response, but i can't get the data in the javascript client-side

Node server:

var my_http = require('http');


var databaseUrl = "leitordecarga"; // "username:password@example.com/mydb"
var collections = ["tables"]
var db = require("mongojs").connect(databaseUrl, collections);

var callback = [];
db.tables.find(function(err,values){
    if(err || !values){
        console.log('error');
    }else{
        values.forEach(function(value){
            callback.push(value);
        });
    }
});


my_http = require("http");  
my_http.createServer(function(request,response){  
    response.writeHeader(200, {"Content-Type": "application/json"});  
    response.write(JSON.stringify(callback));  
    response.end();  
}).listen(8080);

Javascript in client-side:

$(document).ready(function(){
    $.ajax({
        url:'http://localhost:8080/mongo.js',
        dataType:'jsonp',
        type: "GET",
        jsonp : "callback",
        contentType: "application/jsonp",
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log(data.getResponseHeader());
        }
    }).done(function( data ) {
        console.log(data);
    });
});

im using jquery 2.1.0 but i've tried other versions and the error persists

My question is how i can get the data in the success clause

Which line of code does the error point to? `toLowerCase` is not mentioned directly in any of your code in the question. — Rory McCrossan, Jun 04 '14 at 18:26
Well that is not a JSONP response coming back, that would be your first problem. — epascarello, Jun 04 '14 at 18:29
o tried response.writeHeader(200, {"Content-Type": "application/jsonp"}); in the server-side but i get this: Resource interpreted as Script but transferred with MIME type application/jsonp: "http://localhost:8080/mongo.js?callback=jQuery210023581781354732811_1401906639499&callback". — Julio Marins, Jun 04 '14 at 18:30
You are MAKING A JSONP request and you are returning JSON...that is your problem. The client is expecting a javascript file, not json. Do you know what JSONP is? — epascarello, Jun 04 '14 at 18:34
i've already tried the request just as JSON via GET but i get this error: XMLHttpRequest cannot load http://localhost:8080/mongo.js?callback. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. So i tried JSONP — Julio Marins, Jun 04 '14 at 18:44
i changed the port to 8888, still the same. I forgot to say that the two servers are running in the same machine, and one server is running on 80 and the other on 8080. Apache and node respectively — Julio Marins, Jun 04 '14 at 18:54

score 3 · Answer 1 · answered Sep 04 '14 at 00:02

The problem in this case seems to be this line:

console.log(data.getResponseHeader());

You're not supposed to call the getResponseHeader without any parameters. The error is technically that jQuery doesn't check if the key was given as an argument before calling toLowerCase() to it, however, the actual getResponseHeader implementation also throws an error if no parameters were given.

If you meant to just return ALL the response headers, you should use:

console.log(data.getAllResponseHeaders())

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

JSONP response differs from JSON response. With JSONP you actually respond with a JavaScript code.

So you have to modify your code like this:

First, require querystring module in the top of your script:

var qs = require('querystring');

And then you have to rewrite your HTTP request handler:

my_http.createServer(function(request,response){  
    var funcName = qs.parse(request.url).callback;
    response.writeHeader(200, {"Content-Type": "text/javascript"});
    response.write(funcName + '(' + JSON.stringify(callback) + ');');
    response.end();
}).listen(8080);

You can learn more about JSONP here

edited May 23 '17 at 10:24

Community

1
1

answered Jun 05 '14 at 05:58

Oleg

22,300
9
68
84

It's funny. I tried what you said but didn't worked still the same error, but doing response.write('callback =' + '(' + JSON.stringify(callback) + ');'); i can access the callback variable in the chrome console but not inside the client script – Julio Marins Jun 05 '14 at 12:17
You can try this: `$.getJSON('http://localhost:8080/mongo.js?callback=?', function(data) {console.log(data);});` – Oleg Jun 05 '14 at 12:27
Yeah i got the variable, but not inside the success clause, what i did is use in the client url:'http://localhost:8888/mongo.js?callback=mycallback' and in the server response.write('mycallback(' + JSON.stringify(callback) + ');'); then i get the data in mycallback = function(data){ console.log(data); }; outside the $.ajax call, just like the link you passed. Nice, it works for my purpose, thks! But still not getting the data inside the jquery $.ajax call – Julio Marins Jun 05 '14 at 12:30
If you replace `url:'localhost:8888/mongo.js?callback=mycallback'` with `url:'localhost:8888/mongo.js?callback=?'` (yes, `callback=?`. jQuery will replace it with proper value) and leave server-side like in my post, then you should get your response inside `$.ajax`. – Oleg Jun 05 '14 at 12:38

"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" on jsonp request

2 Answers2