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

近期研究Phonegap的相关技术，遇到了服务资源访问的跨域。经过尝试使用服务器端的代理，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

C、Jquery与跨域

对于Jquery跨域访问，jsonp是不错的选择。JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。但是需要注意服务器端返回数据的格式。对于访问已有的服务器数据不满足jsonp时，应该是不可用的。

与一般的ajax访问不同的是需要设置dataType＝"jsonp"，注意服务器端返回数据格式。

D、HTML5与跨域

与HTML5关系密切的跨域技术规范叫跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略[1]，是 JSONP模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支援其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支援 CORS 的老旧浏览器上运作。

值得注意的是同样CORS需要在服务器端配置，也就是说服务器端可以控制访问服务的域名来源，当然，对于没有配置的资源，貌似还是不能访问。

[html] view plaincopy

 

1. header("Access-Control-Allow-Origin:*");

实现思路：

[html] view plaincopy

 

1. function createCORSRequest(method, url) {
2. var xhr = new XMLHttpRequest();
3. if ("withCredentials" in xhr) {
4. xhr.open(method, url, true);
5. } else if ( typeof (xhr) != "undefined") {
6. xhr = new XDomainRequest();
7. xhr.open(method, url, true);
8. } else {
9. // 否则，浏览器不支持CORS
10. xhr = null;
11. }
12. return xhr;
13. }
14. function abc() {
15. var url = "http://st.geoq.cn/geocode/xxx/single?queryStr=%E5%8C%97%E4%BA%AC%E4%B8%9C%E7%9B%B4%E9%97%A8%E5%8D%97%E5%A4%A7%E8%A1%97&citycode=110000&f=json";
16. var xhr = createCORSRequest('GET', url);
17. if (!xhr) {
18. alert('CORS not supported');
19. } else {
20. xhr.send();
21. }
22. }

应为服务器端没有配置导致不可以跨域访问的提示：

E.服务器端代理

这种形式在之前的Flex跨域中也经常使用，Esri也提供了不同服务器的代理页面。但是，问题是它需要对应用进行部署访问。

F.总结

跨域问题是web开发中的普遍问题，同时也是考验前端工程师耐心和能力的试金石。本文就近期研究Phonegap开发中遇到的跨越问题在此总结，与大家分享！