最近在学习前端的过程中因为用到了AJAX,所以要在本地调试。但是令人X疼的是即使是在本地,也会遇到跨域问题。因为浏览器打开本地文件所使用的的file协议与HTTP协议就不同。

ajax报错
但其实浏览器本身是接收到了数据的,但是出于浏览器同源策略的限制,我们不能看到数据。如果你不了解浏览器的同源策略,下面有简单的解释:
简单来说,同源策略就是浏览器出于安全考虑,限制了Javascript脚本在不同网站页面的运行,避免不同网站的代码相互影响。下面是同源页面的判定规则:

URLOutcomeReason
http: //store.company/dir2/other.htmlSuccess 
http: //store.company.com/dir/inner/another.htmlSuccess 
https: //store.company.com/secure.htmlFailureDifferent protocol
http: //store.company.com:81/dir/etc.htmlFailureDifferent port
http: //news.company.com/dir/other.htmlFailureDifferent host

简单来说就是要同域名,通端口,同协议才算是“同域”。我在CSDN找到了我觉得比较完美解决本地调试的办法。

  1. 升级Chrome到最新版本或下载最新版本的浏览器
  2. 创建一个调试用的Chrome快捷方式,右键选择Chrome快捷方式,在弹出的右键菜单中选择"创建快捷方式",重命名新建的快捷方式为Chrome-Debug。
  3. 打开Chrome-Debug快捷方式属性,右键选择Chrome-Debug快捷方式,右键菜单中选择"属性",打开Chrome-Debug快捷方式属性设置对话框。
  4. 增加启动参数,在目标后面增加如下的启动参数:--user-data-dir="c:ChromeDebug" --test-type --disable-web-security ,点"确定"按钮保存设置。完整的目标内容如下所示:"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --user-data-dir="c:ChromeDebug" --test-type --disable-web-security (注意 每个--前面都有一个空格)
  5. 打开Chrome-Debug。因为启动参数中增加了--user-data-dir="c:ChromeDebug",表示Chrome会从c:ChromeDebug中存取用户数据,因该目录可能为空,所以新打开的Chrome-Debug窗口是一个全新的Chrome,没有书签、历史、扩展程序等内容,需要再重新安装扩展程序。
  6. 再次打开之前出错的程序,就可以发现Ajax已经可以正常跨域访问了。

具体内容可查看:chrome浏览器开启Ajax跨域访问调试,侵删。