关于html异步加载外部json文件报错问题

一. HTML代码如下：

参考网站（echarts-JSON请求数据）：https://blog.csdn.net/you23hai45/article/details/51585506

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>echarts-JSON请求数据</title>
        <script type="text/javascript" src="./jquery.min.js" ></script>     //js文件和data.json都在同一文件夹
        <script type="text/javascript" src="./echarts.min.js"></script>
        <script>
            $(document).ready(function(){
                var chart = document.getElementById('chart');
                var chartData = echarts.init(chart);
    
                chartData.setOption({
                    title: {
                        text: '异步数据加载示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: []
                    }]
                });
                
                $.get('./data.json').done(function (data) {
                    
                    console.dir("data:"+data);  //看看json的数据
                    console.dir("data.name:"+data.name); // object
                    console.dir("data.data:"+data.data); // object
                    console.dir(typeof(data)); //控制台输出的格式

                    // 填入数据
                    // var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式
                    chartData.setOption({
                        xAxis: {
                            data: data.categories
                        },
                        series: [{
                            name: '销量',
                            data: data.data
                        }]
                    });
                
                });
                
                function eConsole(param) 
                {
                    console.dir(param);
                }
                
                chartData.on("click",eConsole);
            });
 
        </script>
    </head>
    <body>
        <div id="chart" style="width: 900px; height: 600px;"></div>
    </body>
</html>

二. data.json文件如下：

{
    "name": [
        "苹果",
        "橘子",
        "荔枝",
        "桃子",
        "栗子",
        "梨子",
        "柿子"
    ],
    "data": [
        500,
        280,
        386,
        190,
        107,
        207,
        452
    ]
}

三. 以上面的方式访问会报错。如下：

报错内容：jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/14620/Desktop/Echarts/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

四. 解决方法：

参考网站（【调试错误】Access to XMLHttpRequest at file:E590/ceshi.json from origin null）：https://blog.csdn.net/OrangeChenZ/article/details/84986648

谷歌不允许这样访问。
本地部署网站web。
解决方式一：将html页面部署到服务器再访问。

如何部署？

第一步：控制面板->程序与功能->启用或关闭windows功能

Internet Information Services 前面的复选框勾上。