A brief analysis of js cross-domain problems and a comparison of the advantages and disadvantages of solutions_javascript skills

What is cross-domain?

Concept: As long as the protocol, domain name, and port are different, they are regarded as different domains.

Copy code The code is as follows:

URL explains whether communication is allowed
http://www.a.com/a.js
http://www.a.com/b.js Allowed under the same domain name
http://www.a.com/lab/a.js
http://www.a.com/script/b.js Different folders under the same domain name are allowed
http://www.a.com:8000/a.js
http://www.a.com/b.js Same domain name, different ports not allowed
http://www.a.com/a.js
https://www.a.com/b.js Same domain name, different protocols not allowed
http://www.a.com/a.js
http://70.32.92.74/b.js The domain name and the IP corresponding to the domain name are not allowed
http://www.a.com/a.js
http://script.a.com/b.js The main domain is the same but the subdomains are different. Not allowed
http://www.a.com/a.js
http://a.com/b.js Same domain name, different second-level domain names (same as above) Not allowed (cookies are not allowed to be accessed in this case)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Different domain names are not allowed

Differences in ports and protocols can only be resolved through the background.

Cross-Origin Resource Sharing (CORS)

CROS (Cross-Origin Resource Sharing) cross-domain resource sharing defines how the browser and server should communicate when accessing cross-domain resources. The basic idea behind CROS is to use custom HTTP headers to allow the browser to communicate with the server to determine whether the request or response should succeed or fail.

Copy code The code is as follows:

The above trigkit4 is a relative path. If we want to use CORS, the relevant Ajax code may look like this:

Copy code The code is as follows:

The difference between the code and the previous one is that the relative path is replaced by the absolute path of other domains, which is the interface address you want to access across domains.

The server side supports CORS mainly by setting Access-Control-Allow-Origin. If the browser detects the corresponding settings, it can allow Ajax cross-domain access.

To solve cross-domain problems, we can use the following methods:

Cross domain via jsonp

Now the question comes? What is jsonp? Wikipedia's definition is: JSONP (JSON with Padding) is a "usage mode" of the data format JSON, which allows web pages to request data from other domains.

JSONP, also called padded JSON, is a new method of applying JSON, which is just JSON included in function calls, for example:

Copy code The code is as follows:

callback({"name","trigkit4"});

JSONP consists of two parts: callback function and data. The callback function is the function that should be called in the page when the response comes, and the data is the JSON data passed into the callback function.

In js, it is not possible to directly use XMLHttpRequest to request data on different domains. However, it is possible to introduce js script files from different domains on the page. jsonp uses this feature to achieve it. For example:

Copy code The code is as follows:

">http://example.com/data.php?callback=dosomething">>

After the js file is successfully loaded, the function we specified in the url parameter will be executed, and the json data we need will be passed in as a parameter. Therefore, jsonp requires corresponding cooperation from the server-side page.

Copy code The code is as follows:

$callback = $_GET['callback'];//Get the callback function name
$data = array('a','b','c');//Data to be returned
echo $callback.'('.json_encode($data).')';//Output
?>

Finally, the output result is: dosomething(['a','b','c']);

If your page uses jquery, you can easily perform jsonp operations through its encapsulated method.

Copy code The code is as follows:

jquery will automatically generate a global function to replace the question mark in callback=?, and then it will be automatically destroyed after obtaining the data. In fact, it acts as a temporary proxy function. The $.getJSON method will automatically determine whether it is cross-domain. If it is not cross-domain, it will call the ordinary ajax method; if it is cross-domain, it will call the jsonp callback function in the form of asynchronously loading the js file.

Advantages and Disadvantages of JSONP

The advantage of JSONP is that it is not restricted by the same-origin policy like the Ajax request implemented by the XMLHttpRequest object; it has better compatibility and can run in older browsers without the support of XMLHttpRequest or ActiveX ; And after the request is completed, the result can be returned by calling callback.

The disadvantages of JSONP are: it only supports GET requests and not other types of HTTP requests such as POST; it only supports cross-domain HTTP requests and cannot solve how to make JavaScript calls between two pages in different domains. problem.

Comparison between CROS and JSONP

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

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

2. Using CORS, developers can use ordinary XMLHttpRequest to initiate requests and obtain data, which has 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).
Cross subdomains by modifying document.domain

Browsers all have a same-origin policy, and one of its limitations is that in the first method, we said that you cannot use ajax to request documents from different sources. Its second limitation is that js cannot interact between frames in different domains in the browser.
The window object can be obtained between different frameworks, but the corresponding properties and methods cannot be obtained. For example, there is a page whose address is http://www.example.com/a.html. There is an iframe in this page, and its src is http://example. .com/b.html, obviously, this page and the iframe inside it are in different domains, so we cannot get the content in the iframe by writing js code in the page:

Copy code The code is as follows:

At this time, document.domain can come in handy. We only need to add http://www.example.com/a.html and http://example.com/ b.htmlJust set the document.domain of these two pages to the same domain name. But it should be noted that the setting of document.domain is limited. We can only set document.domain to itself or a higher-level parent domain, and the main domain must be the same.

1. Set document.domain: in the page http://www.example.com/a.html

Copy code The code is as follows:

2. Also set document.domain: in the page http://example.com/b.html

Copy code The code is as follows:

The method of modifying document.domain is only applicable to interactions between frames in different subdomains.