破解同源策略,ajax请求本地文件

正如“same origin policy”所定义,处于安全考虑,两个不同域(例如kingscow.com访问goashton.com)是不能相互访问(敏感)信息的。同理,通过ajax访问本地文件(非服务器方式)也是禁止的。

我尝试在angular component中访问templateUrl指定的模版文件,然而angular机制是通过ajax读取的,也就导致出现如下图情形:
screen-shot-2016-10-26-at-10-12-01

当然,最好的方式是遵守SOP同源策略,搭建server来运行这段代码。如果非(jue)要(jiang)ajax访问本地文件,也是可以的,方法如下

FIREFOX

打开一个新tab,地址栏输入about:config,搜索security.fileuri.strict_origin_policy,点击将value改为false,如下图
screen-shot-2016-10-26-at-11-06-57输入命令打开网页 open -a firefox -g index.html

CHROME

Chrome没有提供直接的配置方式,可以在控制台下打开chrome并禁止安全策略,按如下步骤

1. 完全关闭chrome,进入控制台(以mac iIterm为例)
2. open -a Google\ Chrome -g –args –disable-web-security –user-data-dir
3. open -a Google\ Chrome -g ./index.html
步骤二打开chrome浏览器,并关闭安全模式,chrome会有安全提示,如下图。步骤三打开带有ajax请求的本地文件(替换index.html)
screen-shot-2016-10-26-at-10-50-50

最后强调一次,正确使用ajax的方式是在server下。

破解同源策略,ajax请求本地文件