Cross-domain issues in js

The content of this article is about the cross-domain issues of js. Now I share it with you. Friends in need can refer to it.

The sample code is at E/AjaxGGW/For cross-domain issues, refer to the bookmark nuggets (correctly face cross-domain, don’t panic)

1. Cross-domain: The browser cannot execute scripts from other websites. It is caused by the browser's same origin policy. Security restrictions implemented by the server on JavaScript

2. The same-origin policy restricts the following behaviors:

• Cookie, LocalStorage and IndexDB cannot be read

• DOM and JS objects cannot be obtained

• Ajax request cannot be sent

3. Common cross-domain scenarios
Same origin: domain name, protocol, and port are the same

• http://www.nealyang.cn/index.html Call http://www.nealyang.cn/server.php Non-cross-domain

• http://www.nealyang.cn/index.htmlCall http://www.neal.cn/server.php Cross-domain, different main domains

• http://abc.nealyang.cn/index.html Call http://def.neal.cn/server.php Cross-domain , subdomain names are different

• http://www.nealyang.cn:8080/index.html Call http:/ /www.nealyang.cn/server.php Cross-domain, different ports

• https://www.nealyang. cn/index.html Call http://www.nealyang.cn/server.php Cross-domain, different protocols

4. Cross-domain solution

1)jsonpcross domain

In the html pageLoad static resource files from different domain names through the corresponding tags is allowed by the browser. Generally, we can dynamically create a script tag , and then request a URL with parameters to achieve cross-domain communication.

However, the biggest flaw is that only get request

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

2)document.domain iframe cross-domain (1.html and document.domain iframe cross-domain.html)

The most important requirement is that the main domain name is the same, two html pages are required

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

3)window.name iframe cross-domain (origin.html and target.html are not in Nuggets)

window.name attribute can set or return the name of the storage window of a string. Her magic is that the name value will still exist when loaded on different pages or different domains. It will not change without modification, and it can store very long names (2MB)

Assume that the index page requests data on the remote server. We create an iframe tag under the page. The src of the iframe points to the address of the server file (the iframe tag src can cross domain). The window is set in the server file. .name value, and then read the value of window.name in the iframe in index.html

If the index.html page and the page If the src of the iframe does not come from a different source, you cannot operate anything in the frame. The two pages are in different domains, and the source page cannot obtain the name value of the target page, because the name value is only visible to pages in the same domain.

4)Location.hash iframe cross domain

This cross The domain method is similar to the one introduced above. It also dynamically inserts an iframe and then sets its src as the server address. The server also outputs a js code and completes data transmission through communication with the child window.

And location.hash is actually the anchor point of the URL. For example, after opening the URL of http://www.nealyang.cn#Nealyang, enter it in the console location.hash will return the #Nealyang field.

[Note] In fact, location.hash and window.hash are similar. They are both methods that use global object properties. And these two methods are also the same as jsop. The same thing is that only get requests can be implemented

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

5)postMessage cross-domain (a.html and b.html )

#This is a cool API proposed by H5, including the postMessage method for sending information and the Message time for receiving information.

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

相关推荐：

JS跨域处理详解

js跨域请求服务实例分析

关于js跨域问题的总结

The above is the detailed content of Cross-domain issues in js. For more information, please follow other related articles on the PHP Chinese website!