什麼問題

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 // 埠號
}

當然其他編輯器也有類似的外掛。

原文連結