Question

我正在尝试通过以下JavaScript将公共json文件用作数据源：

const url = "https://data.melbourne.vic.gov.au/resource/ez6b-syvw.json";

var table = new Tabulator("#example-table", {
    ajaxConfig:{
        method: 'GET'
    },
    ajaxURL: url, //ajax URL
    index:"MessageID",
    autoResize:true,
    layout:"fitData", //layout options
    placeholder:"Awaiting Data...",
    columns:[ //Define Table Columns
        {title:"timestamp", field:"timestamp"},
        {title:"temperature", field:"temp_avg"},
        {title:"humidity", field:"humidity_avg"},
        {title:"latitude", field:"latitude"},
        {title:"longtitude", field:"longtitude"},

    ],

    ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        return response; //pass the data array into Tabulator
    },

    rowClick:function(e, row){ //trigger an alert message when the row is clicked
    alert("Row " + row.getData().MessageId + " Clicked!!!!");
    },
});

但是我在Chrome中收到以下控制台消息：

访问CORS策略已阻止从原点“ https://data.melbourne.vic.gov.au/resource/ez6b-syvw.json”到“ http://192.168.0.6”的获取：Access-Control-Allow-不允许请求标头字段access-control-allow-origin-标头在起飞前响应。 data.melbourne.vic.gov.au/resource/ez6b-syvw.json:1无法加载资源：net :: ERR_FAILED tabulator.min.js：5 Ajax加载错误-连接错误：TypeError：无法获取（匿名）@ tabulator.min.js：5 tabulator.min.js：5 Ajax加载错误：TypeError：无法获取

我不知道我在做什么错了吗？

请帮助。

谢谢。

Answer 1

从资源中获取数据似乎存在问题。制表符似乎总是发送Access-Control-Allow-Origin，但是您的资源不允许这样做。因此，一种解决方法是使用您自己的fetch请求而不是Tabulator ajax选项。然后，您可以在表实例上使用setData。

这里是一个例子。 https://jsfiddle.net/nrayburn/8wd3zo9q/33/

我不确定这是否是错误，或者我只是没有找到解决方法。

Answer 2

将此添加到您的 ajaxConfig 中，您就可以开始了。

ajax配置：{ 模式: "no-cors",
方法：'获取' }

导入json文件时遇到问题

2 个答案: