本地文件夾http服務器,簡單來說,就是使用http訪問本地文件夾(local
地址),而不是以file://
開頭,兩者的區別就是,前者是本地服務器,后者只是訪問本地文件。
為什么要部署本地文件夾http服務器?
可以方便實現跨域和防止跨域(google表現的同源策略)等。
比如,我在進行Vue的實例是,請求了本地文件夾的.json文件,然后則是被瀏覽器出於安全考慮阻止了跨域請求。
vue-resource.js:1190 Failed to load file:///Users/mac/Downloads/shoppingCart/unit/data/cartData.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
安裝全局http-server
$ npm install http-server -g
/Users/mac/.node_modules_global/bin/http-server -> /Users/mac/.node_modules_global/lib/node_modules/http-server/bin/http-server
+ http-server@0.10.0
updated 1 package in 8.186s
表示安裝成功,快捷方式的路徑:/Users/mac/.node_modules_global/bin/http-server
原身路徑:/Users/mac/.node_modules_global/lib/node_modules/http-server/bin/http-server
配置環境變量
打開terminal,
$ open .bash_profile
添加路徑:
export HTTP_SERVER_HOME=/Users/mac/.node_modules_global/lib/node_modules/http-server
export PATH=$PATH:$HTTP_SERVER_HOME/bin
開始使用
關閉terminal再重新打開,之后進入項目根目錄:
$ http-server
Starting up http-server, serving ./public
Available on:
http://127.0.0.1:8080
http://172.168.16.121:8080
Hit CTRL-C to stop the server
開啟成功,在瀏覽器中輸入兩個地址中的任意一個即ok!