什么問(wèn)題
WEB開(kāi)發(fā)過(guò)程中,很多時(shí)候我們都是寫(xiě)一些簡(jiǎn)單的Demo,并不是開(kāi)發(fā)一個(gè)完整項(xiàng)目,此時(shí)我們常見(jiàn)的操作是:
•新建文件夾
•新建需要的文件
•在Sublime(或其他編輯器)中完成DEMO的編碼
•雙擊HTML文件,直接在瀏覽器中運(yùn)行演示
如果此時(shí)Demo中有AJAX操作,瀏覽器就會(huì)報(bào)一個(gè)錯(cuò):
XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
原因很簡(jiǎn)單,瀏覽器(Webkit內(nèi)核)的安全策略決定了file協(xié)議訪(fǎng)問(wèn)的應(yīng)用無(wú)法使用XMLHttpRequest對(duì)象,錯(cuò)誤消息中也很清楚的說(shuō)明了:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨域請(qǐng)求僅支持協(xié)議:http, data, chrome, chrome-extension, https, chrome-extension-resource
在某些瀏覽器中是允許這種操作的,比如Firefox瀏覽器,也就是說(shuō)Filefox支持file協(xié)議下的AJAX請(qǐng)求。
解決辦法
作為我個(gè)人最喜歡的Chrome,強(qiáng)大,沒(méi)什么好說(shuō)的,只有想不到,幾乎沒(méi)有做不到,所以必須也得支持:
Windows:
•設(shè)置Chrome的快捷方式屬性,在“目標(biāo)”后面加上–allow-file-access-from-files,注意前面有個(gè)空格,重新打開(kāi)Chrome即可。
Mac:
•只能通過(guò)終端打開(kāi)瀏覽器:打開(kāi)終端,輸入下面命令:open -a “Google Chrome” –args –disable-web-security然后就可以屏蔽安全訪(fǎng)問(wèn)了[ –args:此參數(shù)可有可無(wú)]
補(bǔ)充說(shuō)明
長(zhǎng)久來(lái)看,你肯定是需要通過(guò)HTTP的方式訪(fǎng)問(wèn)你的應(yīng)用,那就需要配置HTTP服務(wù)器軟件。但是對(duì)于一些剛?cè)腴T(mén)的同學(xué),配一個(gè)HTTP服務(wù)器(比如Apache、IIS等)比較繁瑣,望而卻步。
•對(duì)于使用IDE的同學(xué)沒(méi)什么好說(shuō)的,每個(gè)用于Web開(kāi)發(fā)的IDE都內(nèi)置http服務(wù)器,不用單獨(dú)配置。
•對(duì)于喜歡輕量級(jí)編輯器的同學(xué),比如Sublime Text,它默認(rèn)是沒(méi)有內(nèi)置HTTP服務(wù)器的
接下來(lái)推薦一款Sublime的插件Sublime Server,這個(gè)插件可以提供一個(gè)靜態(tài)文件HTTP服務(wù)器,具體使用方式如下:
•安裝Package Control(Sublime的插件管理工具),不會(huì)安裝自行Google
•Command+Shift+P或Ctrl+Shift+P打開(kāi)命令面板,輸入Package Control: Install Package
•稍等片刻(此時(shí)會(huì)連接到插件提供商的服務(wù)器,比較慢,有可能背墻),搜索SublimeServer
•安裝完成過(guò)后通過(guò)Tool → SublimeServer → Start SublimeServer
•一定要用打開(kāi)文件夾的方式使用Sublime,否則沒(méi)有辦法正常使用SublimeServer。
•打開(kāi)HTML文件,在右鍵菜單中選擇View in SublimeServer,此時(shí)就可以以HTTP方式在瀏覽器中訪(fǎng)問(wèn)該文件了,
•如果該選項(xiàng)是灰色的,那就說(shuō)明沒(méi)有啟動(dòng)SublimeServer,Tool → SublimeServer → Start SublimeServer
到此為止,你已經(jīng)可以在Sublime中使用HTTP服務(wù)器了。
可能遇到的問(wèn)題
如果Start SublimeServer不能點(diǎn),可能是當(dāng)前8080端口被占用了(SublimeServer默認(rèn)使用8080端口)
解決方法就是打開(kāi)配置文件將端口修改為其他端口:
以下是我的配置:
{
"attempts": 5,
"autorun": false, // 是否在啟動(dòng)Sublime時(shí)自動(dòng)啟動(dòng)SublimeServer
"defaultExtension": ".html",
"interval": 500,
"mimetypes":
{
"": "application/octet-stream",
".c": "text/plain",
".h": "text/plain",
".py": "text/plain"
},
"port": 2016 // 端口號(hào)
}
當(dāng)然其他編輯器也有類(lèi)似的插件。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:- 如何解決ajax在google chrome瀏覽器上失效