Angular經過XHR加載模板而限制使用file://（解決方案）

編寫angular項目時，遇到此困難：

angular.js:12011 XMLHttpRequest cannot load file:///E:/angular/imooc/chapter2/bookstore/app/tpls/hello.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

 

分析：

由於許多瀏覽器（包括chrome、opera）限制使用XHR時調用file://協議。

而AngularJS的模板tpl經過XHR下載，而使用本地打開（file://，即直接打開網頁），就會致使以上錯誤。

 

對於該問題，有3種解決方案：

①使用Web服務器運行你的項目（有像不少簡單的解決辦法 https://code.google.com/p/mongoose/或幾行的node.js腳本）。

②使用index.html文件嵌入模板<script>指令：參考網址 http://docs.angularjs.org/api/ng.directive:script，因此模板再也不須要經過XHR加載。

③更改瀏覽器設置爲容許XHR調用過file://協議。例如，這能夠在Chrome中完成，像這樣： 容許谷歌Chrome瀏覽器使用XMLHttpRequest從本地文件加載URL，推薦方式爲"chrome.exe --allow-file-access-from-files"（在命令行中先進入chrome.exe的目錄，再執行此命令）。（參考網址： http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file）

 

我本身試了方案③，仍是行不通，最終採用方案①中的node，安裝http-server（輕量級server），在項目目錄下，命令行運行啓動http-server，則項目下的文件均可以在服務器上跑，這樣angular經過XHR加載模板時，調用的是http協議，打開網頁就不會出現上述錯誤了。

 

可能講得不太清晰，若有寫得很差的，歡迎吐槽留言提問，有更好的解決方案歡迎共享，O(∩_∩)O謝謝！