javascript - 带有 $.getJSON() 的 canvasJS 出现 CORB 错误

问题描述

我收到以下脚本的 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 文件返回这个..

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

我不确定这是否是为什么...

标签： javascriptjquerycanvasjs

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

您没有覆盖默认的 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 请求。它不能实现良好的客户端错误处理。它不能用于限制可以读取响应的来源：它是全有或全无。

改为输出 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;

在客户端，不要包含在?callback=?URL 中，因为这会触发 jQuery 中的 JSONP 模式。

javascript - 带有 $.getJSON() 的 canvasJS 出现 CORB 错误

问题描述

解决方案

推荐阅读