Js中通过XMLHttpRequest调用读取本机json文件的疑问

我是打算将json中的数据用echarts图标展示出来，所以将读取的操作写入了echarts的点击事件中，具体代码是这样：

myChart.on('click', function (params) {
    if (params.componentType === 'series' && params.seriesType === 'line') {
        var dataIndex = params.dataIndex;
        if(request!=null){
            var url = "./data/cnn4/aapd/metrics_epoch_" + dataIndex + ".json";/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
            request.open("GET", url,true);/*设置请求方法与路径*/
            // request.setRequestHeader('Content-Type','application/json');
            //request.overrideMimeType("application/json");
            request.onreadystatechange = function () {/*XHR对象获取到返回信息后执行*/
                if(request.readyState == 4){
                    if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                    var json = JSON.parse(request.responseText);
                    //后面开始读数据操作

然后我运行的时候发现需要点击两次才能把新的数据读进来，如果是刚开始点击第一次是没有数据的，然后再点击一次才会将数据读入显示，我的setoption操作也是紧跟着前面的，紧接着读完数据就马上画图，上网找了资料发现可能是因为xmlhttprequest非简单请求会先发一个options预检请求，而我已经把自定义的头都注释了用了get结果还是不行，网上也没有查找到可以屏蔽掉第一次请求返回数据的方法，想问下大家有什么解决办法吗？想只点击一次就可以出来图形。

https://blog.csdn.net/qq649954944/article/details/80241556，上面链接应该可以解答你的疑惑