JavaScript cross-domain problem code summary

What is cross-domain?

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

URL                      说明       是否允许通信

http://www.a.com/a.js

http://www.a.com/b.js     同一域名下   允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js 同一域名下不同文件夹 允许

http://www.a.com:8000/a.js

http://www.a.com/b.js     同一域名，不同端口  不允许

http://www.a.com/a.js

https://www.a.com/b.js 同一域名，不同协议 不允许

http://www.a.com/a.js

http://70.32.92.74/b.js 域名和域名对应ip 不允许

http://www.a.com/a.js

http://script.a.com/b.js 主域相同，子域不同 不允许

http://www.a.com/a.js

http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js

http://www.a.com/b.js 不同域名 不允许

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

Cross-Origin Resource Sharing (CORS)

CORS (Cross-Origin Resource Sharing) cross-origin resource sharing defines that the browser must How to communicate with the server. The basic idea behind CORS 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.

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();
</script>

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

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

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 the cross-domain problem, we can use the following methods:

Cross-domain through 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, it is a new method of applying JSON, which is just JSON included in the function call, for example:

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

JSONP It 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:

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

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.

<?php
$callback = $_GET[&#39;callback&#39;];//得到回调函数名
$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>

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

If your page uses jquery, then Through its encapsulated method, it is very convenient to perform jsonp operations.

<script type="text/javascript">
    $.getJSON(&#39;http://example.com/data.php?callback=?,function(jsondata)&#39;){
        //处理获得的json数据
    });
</script>

jquery will automatically generate a global function to replace the question mark in callback=?. After the data is obtained, it will be automatically destroyed. In fact, it will create a The role of the temporary agent 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 be called in the form of asynchronous loading of js files. The callback function of jsonp.

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; its compatibility is better , can run in older browsers, does not require XMLHttpRequest or ActiveX support; 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 does not support other types of HTTP requests such as POST; it only supports cross-domain HTTP requests and cannot solve the problem between two pages in different domains. Problem making JavaScript calls.

Comparison between CORS and JSONP

Compared with JSONP, CORS is undoubtedly more advanced, convenient and reliable.

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. One of its limitations is that in the first method we said that it cannot pass ajax. Method to request documents from different sources. Its second limitation is that js cannot interact between frames in different domains in the browser.

Different frameworks can obtain window objects, but they cannot obtain the corresponding properties and methods. For example, there is a page whose address is http://www.php.cn/. There is an iframe in this page, and its src is http: //www.php.cn/, obviously, this page and the iframe frame inside it are in different domains, so we cannot obtain by writing js code in the page Things in iframe:

<script type="text/javascript">
    function test(){
        var iframe = document.getElementById(&#39;ifame&#39;);
        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

这个时候，document.domain就可以派上用场了，我们只要把http://www.php.cn/ 和 http://www.php.cn/这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.php.cn/ 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = &#39;example.com&#39;;//设置成主域
    function test(){
        alert(document.getElementById(&#39;iframe&#39;).contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

2.在页面 http://www.php.cn/ 中也设置document.domain:

<script type="text/javascript">
    document.domain = &#39;example.com&#39;;//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

 以上就是JavaScript跨域问题代码总结的内容，更多相关内容请关注PHP中文网（www.php.cn）！