配置Chrome支援本地（file協定）的AJAX請求（圖文教學）

這篇文章主要為大家詳細介紹了配置Chrome支援本地（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 // 端口号
}

當然其他編輯器也有類似的插件。 

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

AJAX分頁效果簡單實作（圖文教學）

使用Ajax或Easyui等框架時的Json-lib的處理方案（圖文教學）

Ajax實作清單無限載入和二級下拉選項效果

#

以上是配置Chrome支援本地（file協定）的AJAX請求（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！