The perfect solution for Cross-domain requests (JSONP, CORS) _ Basics

A well-known problem is that Ajax directly requests that normal files have Cross-domain permissions to access problems. The solution has jsonp,flash and so on.

JSONP

We found that when calling JS files on a Web page is not affected by Cross-domain, any label with the attribute "src" has cross-domain capabilities, such as <script>, , <iframe>. That means that if you want to access data across domains, the server can only place the data in a JS format file. We happen to know that JSON can describe complex data succinctly, and JSON is also supported by JS native, so the data in this format can be handled almost arbitrarily at the client. The client can then invoke the dynamically generated JS format file on the Cross-domain server in exactly the same way as the calling script. After the client has successfully invoked the JSON file, it obtains the data it needs. This has formed the basic concept of JSONP. Allows the user to pass a callback parameter to the server, and then the server returns the data by wrapping the callback parameter as the function name to the JSON data, so that the client can customize its own function to automatically process the returned data.

jquery supports JSONP calls. When you specify a callback function name in another domain, you can load the JSON data in the following form.

Url?callback=?
Jquery.getjson (url + "&callback=?", function (data) { 
 alert (data.a + data.b); 
});

Service side of course also to provide JSONP support, in fact, as long as the provision of reading and writing callback this params can be.

Cross-domain resource sharing (CORS)

The Cross-origin Resource Sharing (CORS) is a draft of the Web work, which defines how browsers and servers communicate when accessing resources across domains. The basic idea behind cors is to use a custom HTTP header to allow browsers and servers to understand each other and decide whether the request or response succeeds.

Compared with JSONP, Cors is more advanced, convenient and reliable.

1. JSONP can only implement get requests, while cors supports all types of HTTP requests.

2, the use of cors, developers can use the common XMLHttpRequest to initiate requests and access to data, compared to JSONP has better error handling.

3, Jsonp mainly by the old browser support, they often do not support cors, and most modern browsers have supported the Cors.

For a simple request, there is no custom header, either using Get or using post, its body is text/plain, and the request is sent with an extra head called Orgin. The origin header contains the header of the requesting page (protocol, domain name, port) so that the server can easily determine whether it should provide a response.

Server-side support for cors is mainly done by setting up Access-control-allow-origin.

Header Set Access-control-allow-origin *

To prevent XSS from attacking our servers, we can restrict the domain, such as

Access-control-allow-origin:http://www.jb51.net

Many services have provided cors support, such as AWS support for Cross-domain resource sharing cors, and no proxies are required to upload to S3.

Above this cross domain request perfect solution (JSONP, CORS) is small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.