Perfect solution for cross domain requests of JSONP CORS

A well-known problem is that Ajax directly requests ordinary files with cross-domain unauthorized access.The solutions are JSONP, Flash, etc.

JSONP

We found that when calling an js file on an Web page, there is no cross-domain effect. Any tag with the attribute "src" has cross-domain capabilities, such as < script > , < img > , < iframe > .That is, if you want to access data across domains, the server can only place the data in js format files.It happens that we know JSON can describe complex data concisely, and JSON is also natively supported by js, so we can process data in this format almost as freely as we want on the client side.Clients can then invoke dynamically generated js format files on cross-domain servers in a manner similar to calling script 1.Once the client invokes the JSON file successfully, it gets the data it needs.This forms the basic concept of JSONP.Allows the user to pass an callback parameter to the server, which then wraps the JSON data as a function name when the server returns the data, allowing the client to customize its own function to automatically process the returned data.

jQuery supports calls to JSONP.With the callback function name specified in another domain name, the JSON data can be loaded as follows.

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

Of course, the server also needs to provide JSONP support, in fact, as long as the callback read and write params is provided.

Cross-domain Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is the W3c working draft that 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 determine whether the request or response is successful or not.

CORS is more advanced, convenient and reliable than JSONP.

1. JSONP can only fulfill GET requests, while CORS supports all types of HTTP requests.

2. With CORS, developers can initiate requests and obtain data using normal XMLHttpRequest, which has better error handling than JSONP.

3. JSONP is mainly supported by older browsers, which often do not support CORS, while most modern browsers already support CORS.

For a simple request, there is no custom header, either GET or POST, whose body is text/plain, and the request is sent with an additional header called Orgin.The Origin header contains the header of the request page (protocol, domain name, port) so that the server can easily decide if it should provide a response.

Server-side support for CORS is mainly achieved by setting up Access-Control-Allow-Origin.

Header set Access-Control-Allow-Origin *

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

Access-Control-Allow-Origin: https://www.ofstack.com

Many services already provide CORS support, such as AWS for cross-domain resource sharing function CORS, which does not require proxy for uploading to S3.