Perfect solution for cross-origin requests (JSONP, CORS) and jsonpcors

Perfect solution for cross-origin requests (JSONP, CORS) and jsonpcors

A well-known problem is that Ajax directly requests common files without cross-domain access permissions. Solutions include JSONP and Flash.

JSONP

We found that when calling js files on the web page, it is not affected by cross-origin. All tags with the "src" attribute have cross-origin capabilities, for example, <script>, , and <iframe>. That is to say, if you want to access data across domains, the server can only store the data in js files. As we know, JSON can describe complex data in a concise manner, and JSON is also supported by js native, so the client can process the data in this format as needed. Then, the client can call the js format files dynamically generated on the Cross-origin server in the same way as the call script. After the client successfully calls the JSON file, it obtains the required data. This forms the basic concept of JSONP. You can pass a callback parameter to the server. When the server returns data, the callback parameter is used as the function name to enclose JSON data, in this way, the client can customize its own functions to automatically process the returned data.

JQuery supports JSONP calls. Specify the callback function name in another domain name to load JSON data in the following format.

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

The server must also provide JSONP support. In fact, you only need to provide the params for reading and writing callback.

Cross-origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is the W3c working draft, which defines how the browser communicates with the server during Cross-Origin Resource access. The basic idea behind CORS is to use a custom HTTP header to allow the browser and server to understand each other and decide whether the request or response is successful.

CORS is more advanced, convenient, and reliable than JSONP.

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

2. With CORS, developers can use common XMLHttpRequest to initiate requests and obtain data, which provides better error handling than JSONP.

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

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

The server supports CORS mainly by setting Access-Control-Allow-Origin.

Header set Access-Control-Allow-Origin *

To prevent XSS attacks against our servers, We can restrict the domain, such

Access-Control-Allow-Origin: http://www.bkjia.com

Many services have provided CORS support. For example, AWS supports CORS and does not require a proxy to upload data to S3.

The perfect solution for this cross-origin request (JSONP, CORS) is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.