What is cross-domain? Introduction to four ways of cross-domain JavaScript

This article brings you a detailed explanation of PHP synergy implementation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is cross-domain

When any of the protocol, subdomain name, main domain name, and port number are different, they are all counted as different domains. Requesting resources from different domains is considered "cross-domain".
For example: http://www.abc.com/index.html requests http://www.efg.com/service.php.

Cross-domain does not mean that the request cannot be sent out, the request can be sent out, the server can receive the request and return the result normally, but the result is intercepted by the browser . The reason why it occurs across domains is that it is restricted by the same-origin policy. The same-origin policy requires that the source is the same for normal communication, that is, the protocol, domain name, and port number are all exactly the same.

2. What is the same-origin policy and its restrictions

• Cookie, LocalStorage, IndexedDB and other storage content

• DOM node

• AJAX request cannot be sent

But there are three tags that allow cross-domain loading of resources:

1.<img  src="/static/imghwm/default1.png" data-src="http://crossdomain.com/jsonServerResponse?jsonp=fn" class="lazy" alt="What is cross-domain? Introduction to four ways of cross-domain JavaScript" >
2.<link>
3.<script></script>

3. Cross-domain processing method 1 - JSONP

Utilization<script># With this open policy of the ## element, web pages can obtain JSON data dynamically generated from other sources. JSONP requests must be supported by the other party's server. <code></script>2. Comparison between JSONP and AJAX

JSONP and AJAX are the same. They are both ways in which the client sends a request to the server and obtains data from the server. But AJAX belongs to the same-origin policy, and JSONP belongs to the non-original policy (cross-domain request)

3. JSONP advantages and disadvantages

The advantage of JSONP is that it has good compatibility and can be used to solve cross-origin problems of mainstream browsers. Domain data access issues.

4.JSONP process (take the third-party API address as an example, there is no need to consider the background program)

Declare a callback function, its function name (such as fn) is used as a parameter value to be passed to the server that requests cross-domain data. The function parameter is to obtain the target data (data returned by the server).
Create a
• <script><p> tag, assign the cross-domain API data interface address to the src of the script, and also request the server in this address Pass the function name (parameters can be passed via question marks:?callback=fn). <code></script>
After the server receives the request, it needs to perform special processing: concatenate the passed in function name and the data it needs to give you into a string, for example: passed in The function name is fn, and the data it prepares is fn([{"name":"jianshu"}]).

Finally, the server returns the prepared data to the client through the HTTP protocol, and the client then calls and executes the previously declared callback function (fn) to operate on the returned data.

• <script>
      function fn(data) {
          alert(data.msg);
      }
  </script>
  <script></script>

where fn is the callback function registered by the client. The purpose is to obtain the json data on the cross-domain server and process the data.

fn({ msg:'this  is  json  data'})

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"fn",//->自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
jsonp:"jsonp",//->把传递函数名的那个形参callback变为jsonp，可省略
success:function (data){
console.log(data);}
});

1.CORS原理

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");

//在服务器端设置同源策略地址
router.get("/userlist", function (req, res, next) {   
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};  
    res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'});  
    res.write(JSON.stringify(user));  
    res.end();  
});

//前端代码：
<p>user input：<input></p>
<script></script>
<script>
var socket = io(&#39;http://www.domain2.com:8080&#39;);
// 连接成功处理
socket.on(&#39;connect&#39;, function() {
    // 监听服务端消息
    socket.on(&#39;message&#39;, function(msg) {
        console.log(&#39;data from server: ---> &#39; + msg); 
    });

 // 监听服务端关闭
    socket.on(&#39;disconnect&#39;, function() { 
        console.log(&#39;Server socket has closed.&#39;); 
    });
});
document.getElementsByTagName(&#39;input&#39;)[0].onblur = function() {
    socket.send(this.value);
};
</script>

//Nodejs socket后台：
var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

//发送信息页面 http://localhost:63342/index.html
  
  
    <meta>  
    <title>跨域请求</title>   
  
  
    <iframe></iframe>  
    <input>  
  
  
<script>  
   function  run(){  
        var frm=document.getElementById("frm");  
        frm.contentWindow.postMessage("跨域请求信息","http://localhost:3000");  
   }  
</script>

//接收信息页面 http://localhost:3000/message.html
 window.addEventListener("message",function(e){  //通过监听message事件，可以监听对方发送的消息。
  console.log(e.data);  
},false);

The above is the detailed content of What is cross-domain? Introduction to four ways of cross-domain JavaScript. For more information, please follow other related articles on the PHP Chinese website!