Two modern methods of cross-subdomain ajax request, ajax cross-subdomain modern

Two modern methods of cross-subdomain ajax request, ajax cross-subdomain modern

Because of the nature of the Internet, most of our company's systems are developed and deployed in the form of multi-subdomains to achieve the goal of loose coupling and distribution. Therefore, interaction between subsystems is inevitable. Although the rpc framework in the background solves most of the interaction problems, in some cases, the interaction between subsystems directly initiated by the front-end is still inevitable. Because of the inherent security nature of browsers, requests under different domain names are usually not allowed to be directly called in the early days. If you directly call requests in different domains, "No" is returned'Access-Control-Allow-Origin 'header is present on the requested resource "error.

Therefore, HTML 5 was bypassed in disguise in the past, mainly in the following ways:

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.

In angularjs, it is usually as follows:

$ Http. jsonp (url + "? Callback = JSON_CALLBACK "). success (function (data ){
Assign data to some attributes of $ scope.
});

However, JSONP only supports get, which limits the amount of data transmitted. So we have CORS in HTML 5.

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. The CORS specification simply extends standard XHR objects to allow JavaScript to send cross-origin XHR requests. It passes
Pre-check (preflight) to check whether you have the permission to send requests to the target server.

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. As follows:

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. For example, we can set the following in nginx:

Http {
......
Add_header Access-Control-Allow-Origin *;
Add_header Access-Control-Allow-Headers X-Requested-;
Add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
......
}

See https://michielkalkman.com/snippets/nginx-cors-open-configuration.html for details

In angularjs, we can call cors requests as follows:

myApp.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
});
myApp.controller("JsonController",function($scope,$http) {
    $scope.getAjax = function(url) {
                        $http.get(url).success(function (response) {
                            $scope.students = response;
                        });
    };
});