最近在使用axios進行本地json文件的讀取時,發現無法正確讀取到文件,經過一番探索與研究,終于找到了解決方法。
首先,axios本身就是基于XMLHttpRequest實現的,而XMLHttpRequest的同源策略限制了訪問本地文件,因此我們不能直接讀取本地json文件。
針對這個問題,有兩種解決方法。
方式一:使用一個本地的HTTP服務器
npm install -g http-server
http-server ./
使用以上命令可以在本地創建一個HTTP服務器,從而我們可以通過http://localhost:port地址的方式讀取本地文件。
方式二:使用ES6的import方法,將本地json文件作為模塊導入
import data from './data.json'
通過以上方式,我們可以將本地的json文件作為一個模塊導入,從而無需通過axios進行讀取。
總結:無法直接使用axios讀取本地json文件,需要通過創建本地HTTP服務器或使用ES6的import方法將json文件作為模塊導入的方式來解決。
下一篇css3粒子匯聚字效果