在使用Angular.js的時候(這里使用的Chrome瀏覽器)塌鸯,配置路由時templateUrl無法訪問本地文件土涝,報錯:
angular.js:10695 XMLHttpRequest cannot load file:///D:/Angular/demo/Angular16-1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
看下錯誤代碼徊哑,大概意思協(xié)議方式只支持http, data, chrome, chrome-extension, https這些方式.不支持file也就是文件的方式.
看下代碼:
a5_7.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{
controller:"c5_7_1",
templateUrl:"Angular16-1.html"
})
.when("/view/:id",{
controller:"c5_7_2",
templateUrl:"Angular16-2.html",
publicAccess:true
})
.otherwise({
redirectTo:"/"
});
}]);
解決辦法
1.修改Chrome快捷方式的啟動配置
(1)在開始菜單輸入Chrome润梯,可以看到Chrome的快捷方式圖標(biāo)父丰,右鍵屬性打開快捷方式的屬性界面.
Chrome屬性
(2)在快捷方式-目標(biāo)輸入框后加上--allow-file-access-from-files,注意--前面要加空格.
修改后
(3)然后重新在開始菜單搜索Chrome,可以看到多出了一個Chrome圖標(biāo),把修改過的快捷方式發(fā)送到桌面出牧,使用修改過的Chrome圖標(biāo)啟動Chrome,重新打開頁面穴肘,然后就可以訪問本地file了.
然后有同學(xué)就說了,我不想每次都使用哪個修改過的快捷方式打開Chrome,這樣好麻煩啊,我就想右鍵文件直接打開的時候就ok.既然這樣的話,繼續(xù)往下看.
2.修改系統(tǒng)默認(rèn)的Chrome啟動方式
(1)按下Win+R,輸入regedit舔痕,進(jìn)入注冊表.
進(jìn)入注冊表
(2)分別找到[HKEY_CLASSES_ROOT下的ChromeHTML,http,https评抚,在 -- "%1"的前面chrome.exe"的后面添加--allow-file-access-from-files,注意空格.
修改后
(3)然后就算你右鍵直接打開伯复,Angular.js的templateUrl也可以訪問本地文件了
3.直接放在使用http的服務(wù)打開
可以使用tomcat或者h(yuǎn)ttp-server等慨代,這里就不解釋了.