首頁 > web前端 > js教程 > 怎麼配置谷歌瀏覽器支援file協定的AJAX請求

怎麼配置谷歌瀏覽器支援file協定的AJAX請求

php中世界最好的语言
發布: 2018-03-31 15:24:06
原創
2596 人瀏覽過

這次帶給大家怎麼設定Google瀏覽器支援file協定的AJAX請求,設定Google瀏覽器支援file協定AJAX請求的注意事項有哪些,以下就是實戰案例,一起來看一下。

什麼問題 

WEB開發過程中,很多時候我們都是寫一些簡單的Demo,並不是開發一個完整項目,此時我們常見的操作是:

 •新資料夾
 •新建所需的檔案
 •在Sublime(或其他編輯器)中完成DEMO的編碼
 •雙擊HTML文件,直接在瀏覽器中執行示範 

如果此時Demo中有AJAX操作,瀏覽器就會回報一個錯誤: 

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

原因很簡單,瀏覽器(Webkit核心)的安全性策略決定了file協定存取的應用無法使用XMLHttpRequest對象,錯誤訊息中也很清楚的說明了:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension , https, chrome-extension-resource. 

跨網域請求僅支援協定:http, data, chrome, chrome-extension, https, chrome-extension-resource 

#在某有些瀏覽器中是允許這種操作的,例如Firefox瀏覽器,也就是說Filefox支援file協定下的AJAX請求。

解決方案 

身為我個人最喜歡的Chrome,強大,沒什麼好說的,只有想不到,幾乎沒有做不到,所以必須也得支持:

 Windows:

•設定Chrome的捷徑屬性,在「目標」後面加上–allow-file-access-from-files ,注意前面有個空格,重新打開Chrome即可。

 Mac:

•只能透過終端機開啟瀏覽器:開啟終端,輸入下方指令:open -a 「Google Chrome」 – args –disable-web-security然後就可以屏蔽安全訪問了[ –args:此參數可有可無] 

補充說明 

長久來看,你肯定是需要透過HTTP的方式存取你的應用,那就需要設定HTTP伺服器軟體。但對於一些剛入門的同學,配上一個HTTP伺服器(例如Apache、IIS等)比較繁瑣,望而卻步。

 •對於使用IDE的同學沒什麼好說的,每個用於Web開發的IDE都內建http伺服器,不用單獨設定。
 •對於喜歡輕量級編輯器的同學,例如Sublime Text,它預設是沒有內建HTTP伺服器的 

接下來推薦一款Sublime的插件Sublime Server,這個外掛程式可以提供一個靜態文件HTTP伺服器,具體使用方式如下:

 •安裝Package Control(Sublime的外掛程式管理工具),不會安裝自行Google
 •Command+Shift+P或Ctrl+Shift+P開啟指令面板,輸入Package Control: Install Package
 •稍等片刻(此時會連接到插件提供者的伺服器,比較慢,有可能背牆),搜尋SublimeServer
 •安裝完成後透過Tool → SublimeServer → Start SublimeServer
 •一定要用開啟資料夾的方式使用Sublime,否則沒有辦法正常使用SublimeServer。
 •開啟HTML文件,在右鍵選單中選擇View in SublimeServer,此時就可以以HTTP方式在瀏覽器中存取該文件了,
 •如果該選項是灰色的,那就表示沒有啟動SublimeServer ,Tool → SublimeServer → Start SublimeServer 

到此為止,你已經可以在Sublime使用HTTP伺服器了。 

可能遇到的問題 

如果Start SublimeServer不能點,可能是目前8080埠被佔用了(SublimeServer預設使用8080埠) 

##解決方法就是開啟設定檔將連接埠修改為其他連接埠:

以下是我的設定: 

{
  "attempts": 5,
  "autorun": false, // 是否在启动Sublime时自动启动SublimeServer
  "defaultExtension": ".html",
  "interval": 500,
  "mimetypes":
  {
    "": "application/octet-stream",
    ".c": "text/plain",
    ".h": "text/plain",
    ".py": "text/plain"
  },
  "port": 2016 // 端口号
}
登入後複製
當然其他編輯器也有類似的插件。 

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

ajax怎麼傳遞陣列到後台

#如何實作AJAX的分頁效果
#

以上是怎麼配置谷歌瀏覽器支援file協定的AJAX請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板