Multiple methods for implementing cross-origin in js _ javascript skills

This article mainly introduces multiple methods for implementing cross-origin in js and five methods for implementing cross-origin in js. If you are interested, refer Starting from the domain

Domain:The domain is the security boundary of the WIN2K network system. We know that the most basic unit of a computer network is "Domain", which is not unique to WIN2K, but the Active Directory can run through one or more domains. On an independent computer, the domain refers to the computer itself. A domain can be distributed across multiple physical locations. At the same time, a physical location can be divided into different network segments for different domains, each domain has its own security policy and its trust relationship with other domains. When multiple domains are connected by a trust relationship, the Active Directory can be shared by multiple trust domain domains.
Domain tree:The domain tree consists of multiple domains that share the same table structure and configuration to form a continuous namespace. The fields in the tree are connected by trust relationships. The active directory contains one or more domain trees. The domains in the domain tree are connected by two-way convertible trust relationships. Because these trust relationships are bidirectional and pass-able, newly created domains in the domain tree or forest can immediately establish trust relationships with each other in the domain tree or forest. These trust relationships allow a single login process to authenticate users on all domains in the domain tree or forest, however, this does not necessarily mean that Authenticated Users have the same rights and permissions in all domains in the domain tree. Because the domain is a security limit, you must assign the corresponding rights and permissions to the user on the basis of each domain.
The deeper the domain hierarchy in the domain tree, the lower the level. A "." represents a level.
For example, the domain zhidao.baidu.com (Baidu Knows) is lower than that of baidu.com (Baidu) because it has two levels, while baidu.com has only one layer.

What is cross-origin?

By default, an XHR object can only access resources in the same domain as the page containing it. This security policy can prevent some malicious behaviors. However, the realization of reasonable cross-origin requests is also crucial to the development of some browser applications.
As long as the Protocol, domain name, and port are different, they are treated as different domains.

For example, sending an ajax request to the following page on the http://www.a.com/a.js page, the following are the request results and descriptions

Different ports and protocols can only be solved through the background. What we need to solve is the problem of different domain names.

How to cross-Origin

(1) CORS (Cross-Origin Resource Sharing)

1. CORS (Cross-Origin Resource Sharing) is a W3C working draft that defines how browsers and servers communicate when Cross-source resources must be accessed. The basic idea behind CORS is to use a custom HTTP header to allow the browser to communicate with the server and decide whether the request or response should succeed or fail.
2. Implementing this function is very simple. You only need to send a response header by the server.

Browser support:

• IE 8 +
• Firefox 3.5 +
• Opera 12 +
• Safari 4 +
• Chrome 3 +

Suppose that our page or application is already on the http://www.a.com/, and we intend to extract data from the http://www. B .com request. In general, if we directly use AJAX for the request, it will fail, and the browser will return an error.
With CORS, The http://www. B .com can allow requests from the http://www.a.com by adding only one header.
The following is the setting in php. "*" indicates that any domain is allowed to submit requests to our server:

header{"Access-Control-Allow-Origin: *"}

CORS compatibility

Function createCORSRequest (method, url) {var xhr = new XMLHttpRequest (); // non-IE browser if ("withCredentials" in xhr) {xhr. open (method, url, true); // IE browser} else if (typeof XDomainRequest! = "Undefined") {vxhr = new XDomainRequest (); xhr. open (method, url);} else {xhr = null;} return xhr;} var request = createCORSRequest ("get", "http://www.somewhere-else.com/page/"); if (request) {request. onload = function () {// request. responseText for processing}; request. send ();}

(2) JSONP (JSON with Padding filling JSON or parameter JSON)

In js, although we cannot directly use XMLHttpRequest to request data in different domains, it is okay to introduce js script files in different domains on the page, jsonp is implemented using this feature.

JSONP consists of the callback function and data. The callback function is the function that should be called on the page when the response arrives, and the data is the JSON data passed into the callback function.

For example: