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

時間 2019-11-22

標籤關於 html 異步加載外部 json 文件報錯問題欄目 HTML 简体版

原文原文鏈接

一. HTML代碼以下：javascript

參考網站（echarts-JSON請求數據）：https://blog.csdn.net/you23hai45/article/details/51585506html

<!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文件以下：java

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

三. 以上面的方式訪問會報錯。以下：jquery

報錯內容：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.web

四. 解決方法：chrome

參考網站（【調試錯誤】Access to XMLHttpRequest at file:E590/ceshi.json from origin null）：http://www.javashuo.com/article/p-snteicnj-mp.htmljson

谷歌不容許這樣訪問。
本地部署網站web。
解決方式一：將html頁面部署到服務器再訪問。windows

如何部署？安全

第一步：控制面板->程序與功能->啓用或關閉windows功能服務器

Internet Information Services 前面的複選框勾上。

第二步：個人電腦右鍵->管理->添加網站

注：主機名不填，用localhost:1213訪問本地服務器。

報錯1：

HTTP 錯誤 403.14 - Forbidden

Web 服務器被配置爲不列出此目錄的內容。

解決1：