Research on cross-domain problems of HTML5, Jquery and Phonegap

Recent research on PHONEGAP's related technologies has encountered the cross-domain of service resource access. After attempting to use the server-side proxy, PhoneGap cannot access the appropriate resources after packaging. With the help of search engine, we find the Jsonp way of jquery and try to find out that the returned format of service resources is not supported. Then moved to cors found also need server-side configuration, a few toss, and later found that PhoneGap originally there is no cross-domain access issues. So, using the Jquerymobile AJAX test, package installs the application, originally can actually access. Although more tortuous, but also count on the relevant cross-domain JS has a certain understanding, in this summary record, for the same needs of students to enjoy!

A, about cross-domain

In fact, cross-domain access in the Daily Web project development is a common problem. The cross-domain problem is due to the browser's homologous policy (same origin policies), a well-known security policy presented by Netscape, which is now used by all JavaScript-enabled browsers.

Simply speaking, the same origin is required domain name, protocol, port three are consistent, and the same-origin strategy refers to the page script can not access non-homologous resources.

B, PhoneGap and cross-domain

In fact, talk about cross-domain is not to pull in phonegap, for PhoneGap itself is no limit, just need to simple configuration can. Because Phonegap is using the file://protocol (the Phonegap wiki says, "The Cross-domain security policy does not affect PHONEGAP applications. Since the HTML files is called by WebKit and the FILE://protocol, the security policy does not apply. " ）

But the default configuration needs to be checked

B1. Related configurations within the jquery project:

$.support.cors=true;

$.mobile.allowcrossdomainpages=true;

B2. PhoneGap Configuration settings:

phongegap2.9.1 (Cordova/defaults.xml)

Find <access origin= "*"/> You can set up a list of domain names that need to be cross-domain here

Specific Reference website

Http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html

C, jquery and cross-domain

For jquery cross-domain access, JSONP is a good choice. JSONP (JSON with Padding) is a "usage pattern" of data format JSON that allows Web pages to have data from other domains. However, you need to be aware of the format of the server-side return data. It should not be available for access to existing server data when JSONP is not satisfied.

Unlike general Ajax access, it is necessary to set the Datatype= "Jsonp" and note the server-side return data format.

D, HTML5 and cross-domain

Cross-domain technical specifications closely related to HTML5 called cross-origin resource sharing (CORS) is a specification for browser technology that provides a way for WEB services to pass sandbox scripts from different domains to circumvent the browser's homologous policy [1], which is a modern version of Jsonp mode. Unlike JSONP, CORS supports other HTTP requirements in addition to the GET request method. Using CORS allows web designers to use General XMLHttpRequest, which is better than JSONP's error handling. On the other hand, JSONP can operate on older browsers that do not support CORS.

It is important to note that the same cors needs to be configured on the server side, which means that the server can control the source of the domain name of the service and, of course, it does not seem to be accessible for resources that are not configured.

[HTML]View Plaincopy

1. Header ("access-control-allow-origin:*");

Implementation ideas:

[HTML]View Plaincopy

2. function Createcorsrequest (method, URL) {
4. var xhr = new XMLHttpRequest ();
6. if ("Withcredentials" in XHR) {
10. Xhr.open (method, URL, true);
14. } else if (typeof (XHR)! = "undefined") {
18. XHR = new Xdomainrequest ();
20. Xhr.open (method, URL, true);
24. } else {
28. Otherwise, the browser does not support Cors
30. XHR = null;
34. }
36. return XHR;
38. }
42. Function abc () {
44. 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 ";
48. var xhr = createcorsrequest (' GET ', url);
50. if (!XHR) {
52. Alert (' CORS not supported ');
54. } else {
56. Xhr.send ();
58. }
60. }

The server side should not be configured to cause no cross-domain access prompts:

E. Server-side proxy

This form is also used frequently in previous flex cross-domains, and ESRI also provides proxy pages for different servers. However, the problem is that it requires deployment access to the app.

F. Summary

Cross-domain problem is a common problem in web development, but also a touchstone to test the patience and ability of front-end engineers. This article on the recent research PhoneGap development encountered in the cross-over problems in this summary, share with you!

Research on cross-domain problems of HTML5, Jquery and Phonegap