Several projects often encountered in cross-domain scheme

1.jsonp

　　jsonp belong to the oldest kind of cross-domain program, I have rarely seen in the current project

$('#btn').click(function(){
    var frame = document.createElement('script');            
        frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
    $('body').append(frame);
})

function func(res){ 
　　console.log(res); 
}

You can see, we click on the button, create a script tag (ie, sends a get request to the address pointed to by src), src address is "localhost: 3000 / article-list", the src address, is our request the server interface. Note that here we have a parameter callback, callback parameter is the core.

Why do you want to define callback? First of all we know, this get request has been sent out, how do we interface requests data back then, callback = func you can help us do this. Good callback parameter defined by requiring that define the front and rear ends, the front end of the process is similar to declare a good function, returns the rear end of the function execution.

2.cors

　　Service-Terminal对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

Once the server through a " preflight " request, after each time the browser requests a normal CORS, as it related to a simple request, there will be a Origin header field. In response to the server, there will also Control-allow-a-Access Origin header field. 
The following is a " pre-screening " after the request, normal CORS browser requests. 

PUT / CORS HTTP / 1.1 
Origin: HTTP: // api.bob.com 
Host: api.alice.com 
the X- -Custom- Header: value 
the Accept - Language: en- US 
Connection: the Keep - Alive 
the User -Agent: Mozilla / 5.0 ... 
Origin field of the header information above the browser is automatically added. 
The following is a normal server response. 

Access -Control-the Allow-Origin: HTTP: // api.bob.com
The Type-the Content: text / HTML; charset = UTF- . 8 
header information above, Access -Control the Allow-Origin-field is included in each response are bound.

CORS JSONP with the same purpose, but more powerful than JSONP.
JSONP only supports GET requests, CORS support all types of HTTP requests. JSONP advantage is to support older browsers, and can request data from the CORS site does not support.

3.postMessage

　　window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

Used to solve cross-domain problems occur the following three conditions:

a. data transfer page and the new window is open

b. messaging between a multi-window

c. page and iframe nested Messaging

grammar:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindowA reference to the other windows, such as an iframe contentWindow properties, perform window.open window object is returned, or a name or numerical index over window.frames .

messageOther data will be sent to the window. It will be structured clone algorithm serialization. This means that you can not secure what data objects to the target of limiting the transfer window without having to own serialization.

targetOriginThrough the window origin to specify which properties window you can receive an event message, which may be a string "*" (unlimited) or a URI. When sending a message, if any protocol target window, the host address or port does not match one of these three values targetOrigin provided, then the message will not be sent; only three exact match, a message will be sent. This mechanism is used to control which messages can be sent to the window

transfer Optional parameter is a string and the simultaneous transmission of message Transferable objects. Ownership of these objects will be transferred to the recipient of the message, the sender side will no longer retain ownership.

Example 1:

HTTP //: // test.com/index.html in
 
<div> 
    <iframes. The above mentioned id = " Child " src = " http://lsLib.com/lsLib.html " > </ iframes.> 
</ Div> 

// by the postMessage () method of the cross-domain iframe page HTTP: // transmitted message lsLib.com/lsLib.html 

the window.onload = function () { 
    window.frames [ 0 ] .postMessage ( ' getColor ' , ' http: // lslib.com ' ); 
} 

// HTTP: // lslib.com/lslib.html in 
// received message, and sends the current color to the home page it 

window.addEventListener ( 'message',function(e){
　　 console.log(e.data);
    if(e.source!=window.parent) return;
    var color=container.style.backgroundColor;
    window.parent.postMessage(color,'*');
},false);

Example 2 (txb merchant terminal):

//发送(preview.html)
var docWindow = document.getElementById('h5-container').contentWindow;
if (!!docWindow) {
    docWindow.postMessage({ type: 'flip', pageIndex: pageIndex }, '*');
}


//接受(h5-formwork.js)
window.addEventListener("message", function receiveMessage(evt) {
    var data = evt.data;
    !!data ? typeof evt.data === 'string' ? JSON.parse(data) : data : {};
    if (data.type === 'flip') {
        return Utils.emit('flip', data.pageIndex);
    }
    return Utils.emit(data.type, data);
}, false);

4.document.domain

5.window.name

6.location.hash

7.http-proxy

8.nginx

9.websocket

Reference may be focused behind the cross-domain: https://blog.csdn.net/qq_17175013/article/details/89115804

Several projects often encountered in cross-domain scheme

Guess you like