No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在使用 Ionic 进行开发时,如果使用 Ionic serve 进行本地测试,你可能会发现服务端没有返回任何数据,并且浏览器的 console中有错误提示: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

 

XMLHttpRequest cannot load http://wp.dev/api/get_recent_posts/?page=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

 

在你折腾完百度(如果你还用百度的话)、又折腾谷歌,来到了这个页面,这个页面会告诉你:很可能是浏览器核心的默认安全策略的问题,其它的不敢说,在命令行中给 Chrome 加上个参数,让它运行,就可以从服务端返回数据了:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --disable-web-security

Access-Control-Allow-Origin

基于 WordPress REST API 和Ionic的APP

移动互联网算是一次革命,但是任何革命都不是要彻底打碎旧世界的,所以,桌面端的WEB还是有存在的理由和必要的, WordPress 可以通过扩展满足桌面端、微信端和APP端的需求,本文记录如何使用Ionic和WordPress + REST API生成自定义APP。

准备

计算机需要安装ionic以及其依赖,网站服务端需安装 REST API插件(在其进入到WordPress核心之前,是需要安装的),由于REST API插件的某些不足,需要自定义其扩展。

步骤

ionic start a0

在上一步骤中,a0为项目目录,可根据实际需要命名;

ionic platform add android

在上一步骤中,添加对安卓平台的支持,可在MAC/MAC BOOK上使用如下命令添加对IOS平台的支持:

ionic platform add ios

可使用

cordova platform list

查看支持的平台/系统。

接下来就是编写js/css/html了,重点是WordPress REST API 与 自定义的 AngularJS 服务之间的数据衔接。

在编写过程中,可使用:

ionic serve

在自己的浏览器上预览APP的大致效果并可在console中输出调试数据。

编写之后,使用命令:

ionic build android

创建安卓平台上的未签名app:

WordPress REST API IONIC

实际运行效果如下:

WordPress REST IONIC APP

这是实验品,所以就不用喷它多丑了。

APP的基本结构

没有定式,下面只是推荐的结构:

WordPress REST IONIC APP

service.js:自定义的服务;

filter:自定义的过滤器,用于信任HTML;

controllers.js:控制器;

config.js:配置文件;

app.js:引导文件。

templates目录下的html文件为APP的页面模板。