jsonp 请求中的“未捕获的类型错误：无法读取未定义的属性‘toLowerCase’”

Posted 2023-03-03

【中文标题】jsonp 请求中的“未捕获的类型错误：无法读取未定义的属性‘toLowerCase’”

【英文标题】："Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" on jsonp request

【发布时间】：2014-07-25 12:55:54

【问题描述】：

我有一个节点服务器和另一个服务器的应用程序通过 jquery 执行 AJAX jsonp 请求以获取参数的 json 数组，但是当我请求数据时 jquery 抛出此错误：

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 

请求已发送，我得到响应，但我无法在 javascript 客户端获取数据

节点服务器：

var my_http = require('http');


var databaseUrl = "leitordecarga"; // "username:[e-mail]/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：

$(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);
    );
); 

我使用 jquery 2.1.0 但我尝试了其他版本，但错误仍然存​​在

我的问题是如何获取成功子句中的数据

【问题讨论】：

错误指向哪一行代码？ toLowerCase 没有在问题中的任何代码中直接提及。

嗯，这不是返回的 JSONP 响应，这将是您的第一个问题。

jquery 库中的错误引发的错误

o 试过 response.writeHeader(200, "Content-Type": "application/jsonp");在服务器端，但我得到这个：资源解释为脚本，但使用 MIME 类型应用程序/jsonp 传输：“localhost:8080/…”。

您正在发出 JSONP 请求并且您正在返回 JSON...这是您的问题。客户端需要一个 javascript 文件，而不是 json。你知道 JSONP 是什么吗？

【参考方案1】：

这种情况下的问题似乎是这一行：

console.log(data.getResponseHeader());

您不应该在没有任何参数的情况下调用 getResponseHeader。从技术上讲，错误是 jQuery 在调用 toLowerCase() 之前不检查键是否作为参数给出，但是，如果没有给出参数，实际的 getResponseHeader 实现也会抛出错误。

如果您只想返回所有响应标头，您应该使用：

console.log(data.getAllResponseHeaders())

【参考方案2】：

JSONP 响应不同于 JSON 响应。使用 JSONP，您实际上会使用 JavaScript 代码进行响应。

所以你必须像这样修改你的代码：

首先，在脚本顶部需要 querystring 模块：

var qs = require('querystring');

然后你必须重写你的 HTTP 请求处理程序：

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); 

您可以了解更多关于 JSONP here

【讨论】：

这很有趣。我尝试了你所说的，但仍然没有同样的错误，但是在做 response.write('callback =' + '(' + JSON.stringify(callback) + ');');我可以在 chrome 控制台中访问回调变量，但不能在客户端脚本中访问

你可以试试这个：$.getJSON('http://localhost:8080/mongo.js?callback=?', function(data) console.log(data););

是的，我得到了变量，但不在成功子句中，我所做的是在客户端 url:'localhost:8888/mongo.js?callback=mycallback' 和服务器 response.write('mycallback(' + JSON .stringify(回调) + ');');然后我在 mycallback = function(data) console.log(data); ;在 $.ajax 调用之外，就像您传递的链接一样。很好，它适用于我的目的，谢谢！但仍然没有得到 jquery $.ajax 调用中的数据

如果您将url:'localhost:8888/mongo.js?callback=mycallback' 替换为url:'localhost:8888/mongo.js?callback=?'（是的，callback=?。jQuery 将用适当的值替换它）并像我的帖子中一样保留服务器端，那么您应该在里面得到响应$.ajax.