DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 配置Chrome支持本地(file協議)的AJAX請求
配置Chrome支持本地(file協議)的AJAX請求
編輯: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 // 端口號
} 

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved