使用 $.getJSON() 的 canvasJS 出现 CORB 错误

Question

我在使用以下脚本时遇到 CORB 错误，我似乎无法弄清楚原因。

<script>

var chart = null;
var dataPoints = [];

window.onload = function() {

chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
        text: "Daily Sales Data"
    },
    axisY: {
        title: "Sold For",
        titleFontSize: 24
    },
    data: [{
        type: "line",
        yValueFormatString: "$#,##0.00",
        dataPoints: dataPoints
    }]
});


$.getJSON("https://www.hostname.com/test/examples/01-overview/test.php?callback=?", callback);

}

function callback(data) {
    console.log(data.dps);
    for (var i = 0; i < data.dps.length; i++) {
        dataPoints.push({
            x: new Date(data.dps[i].date),
            y: data.dps[i].units
        });
    }
    chart.render();
}
</script>

我注意到示例中的格式是

callback({
   "dps":[
      {
         "date":"08/18/2020",
         "units":1550.00
      } //more here
   ]
})

我的PHP文件returns这个..

{"callback":[
    {"dps":[
        {
            "date":"08\/18\/2020",
            "units":"1550.00"
         }, {...}
    ]}
 ]}

我不确定这是否是原因...

Answer 1

你在这里遇到了三个基本问题：

您没有覆盖默认值 Content-Type，因此 PHP 声称它正在输出 HTML。当浏览器收到响应时，它会看到它声称是 HTML，因此不会将其作为 JavaScript 执行。（这是触发您看到的错误的原因，但修复它只会暴露其他两个错误）。
您的 JSONP 格式不正确（正如您怀疑的那样）。看起来你正在创建一个带有回调键的关联数组，然后运行通过 json_encode 整个事情，而不是仅仅编码 JSONP 的 JSON 部分。
您没有使用请求传递的回调名称，而是硬编码了 callback

好吧，如果你不算在 2020 年使用 JSONP，那么三个就是问题。

JSONP 的正确做法是这样的：

<?php
    $data = do_stuff_to_get_the_data();
    if (!test_if_callback_is_safe($_GET['callback'])) {
       die();
    }
    header("Content-Type: application/javascript");
    echo $_GET('callback');
    echo "(";
    echo json_encode($data);
    echo ");";
    exit;

不过。你不应该使用 JSONP。它有一些安全风险。它只允许您发出 GET 请求。它没有启用良好的 client-side 错误处理。不能用于限制可以读取响应的来源：全有或全无。

改为输出JSON。使用CORS给浏览器提供权限，让其他站点的JS运行读取它：

<?php
    $data = do_stuff_to_get_the_data();
    header("Content-Type: application/json");
    header("Access-Control-Allow-Origin: *"); # Don't use a global wildcard if you can restrict this 
    echo json_encode($data); 
    exit;

并且在客户端上，不要在URL中包含?callback=?，因为这将在[=45]中触发JSONP模式=].

使用 $.getJSON() 的 canvasJS 出现 CORB 错误

CORB error with canvasJS with $.getJSON()

javascript

jquery

canvasjs