關於html異步加載外部json文件報錯問題

本文轉載自查看原文 2019-09-26 15:22 539 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 前面的復選框勾上。