关于 HTML5、Jquery、Phonegap 跨域问题的研究

近期研究Hybrid App的相关技术，遇到了服务资源访问的跨域。经过尝试使用服务器端的代理，Phonegap打包后不能够访问到相应资源。在搜索引擎的帮助下，找到了Jquery的jsonp的方式，尝试发现已有的服务资源返回格式不支持。接着转战CORS发现同样需要服务器端配置，几番折腾，后来发现Phonegap原来就不存在跨域访问的问题。于是乎，使用JqueryMobile的ajax测试，打包安装应用，原来真的可以访问。虽然比较曲折，但是也算对js的相关跨域有了一定的认识，在此总结纪录，以供有同样需求的同学享用！



A、关于跨域

其实跨域访问在日常的web项目开发是及其常见的问题。跨域问题的原因是浏览器的同源策略(same origin policy),它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript
的浏览器都会使用这个策略。

简单讲,同源就是要求域名,协议,端口三者都一致，而同源策略就是指页面上的脚本不能访问非同源的资源。

B、Phonegap与跨域

其实，谈跨域是不应该把Phonegap拉进来的，对于Phonegap本身人家是没有限制的，只需要简单配置即可。因为Phonegap使用的是 file:// 协议（Phonegap wiki里面说： ”The cross-domain security policy does not affect PhoneGap applications. Since the html files are called by webkit with the file:// protocol, the security policy
does not apply.”）

但是默认的配置需要检查

b1.Jquery项目里面的相关配置：

$.support.cors=true;

$.mobile.allowCrossDomainPages=true;

b2.Phonegap配置设置：

phongegap2.9.1(cordova/defaults.xml)

找到<access origin="*"/>可以在此处设置需要跨域的域名列表

具体参考官网

http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html
关于前端UI框架这块，最终我们选择了AngularJS和ionicFramework，经过几周的开发发现，这种AngularJS框架相比基于jquery的框架能大大简化开发工作，减少代码量，提高工程质量，性能和用户体验方面也挺好。