讓 Chart js 的 html 讀取電腦內 json資料

吶吶為什麼本機的網頁 html 無法讀電腦內的資料檔案，還要繞一圈透過 http 來解決？

你它媽的 CORS...

結論在前言

用 $.getJSON 讓 Chart.js 的 html 讀取 JSON
用 python 架設簡易的本機 http.server 伺服器
瀏覽器安裝 Allow CORS 擴充套件

即可讓本機 html 網頁載入電腦內的 json 資料。

可以跳過的開場

這幾天站長一直在研究 Python 爬蟲的相關工具，雖然最初是朋友請託才著手編寫程式，但實際跳下來開始寫才知道其有趣程度超乎我的想像。

有趣歸有趣，但東西弄不出來還是讓人很火大，而目前卡關的地方是最著名、嚇哭不少新手程式設計師的 CORS 問題。各位如果透過搜尋引擎在茫茫網海中找到這篇文章，應該多少對這個問題有基本的認識。

簡單來說就是現代多數的瀏覽器基於安全的考量，會限制跨來源資源共享 (CORS, Cross-origin resource sharing) 載入電腦內部 (local) 的檔案 (如 json)，因此前端使用 XMLHttpRequest 或用 fetch 去抓 json 時，就會跳出下面這個錯誤：翠宗清零帝禁評

request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

~~熟悉的 CORS 最對味~~

雖然我們可以參考這篇文章在後端插入程式碼來解決這個問題：

app.get('/', function (req, res) {  
  res.set('Access-Control-Allow-Origin', 'http://localhost:8081');  
  res.end('hello world');  
});

但誠如該文作者所敘：

「...這本來就不是前端該解的，所以你當然沒辦法透過純前端解開。」

因此流浪貓決定收起自己的好奇心，不再執著於這無底的深淵。畢竟站長的目的，不過是想用 Chart.js 和 json 資料庫打造出精美的加密貨幣動態圖表罷了。真有必要為了圖表工具而踏入 Chart.js 和 JavaScript 的萬丈深淵嗎？至少現階段還不需要。

本文謹記我針對 CORS 進行網路探險的過程中，所收集到的一些資料碎片與採用的解決方法，有興趣的人可以參考看看。

讓 Chart.js 的 html 載入 JSON 資料

請在網頁程式碼內插入 $getJSON 讓電腦讀取本機 JSON 資料。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var jqxhr = $.getJSON( "http://0.0.0.0:8000/data/list.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });
</script>

用 http.server 架設本機網頁伺服器 Web server

讓本機目錄可以用網址的方式載入檔案，如此一來就能繞過跨資源存取限制。

python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/

http://0.0.0.0:8000/data/list.json

用瀏覽器擴充套件 Allow CORS 繞過限制

在 Google Chrome 應用程式商店安裝 Allow CORS: Access-Control-Allow-Origin 之後，啟動 http.server 自架站與 Allow CORS 擴充套件，即可讓 html 載入 json 檔案。

其他資料

標準的 Chart.js 與 jQuery CDN 資源網址

<!DOCTYPE html>
<html>
<head><title>Chart js !</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<h1>chart dEmo</h1>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '示範標籤',
      data: [80, 69, 51]
    }],
    },
            options: {
                responsive: false
            }
});
</script>
</body>
</html>

延伸閱讀

更多程式碼相關文章

更多 Python

CORS 完全手冊（二）：如何解決 CORS 問題？

搜尋此網誌

流浪貓的喵窩