What is cross-domain?

The first thing you should know about cross-domain is the same origin policy

Same-origin policy: The same origin policy means that the protocols, ports, and domain names are the same.

So one of the differences between protocols, ports, and domain names is cross-domain

What are the cross-domain solutions? Here are some of the ones I personally summarized and understood:

1. The json across domains

The principle of JSONP across domains is to exploit

2. Cross-domain resource sharing (CORS)

CORS is a W3C standard that allows browsers to issue XMLHttpRequest requests across source servers, overcoming the limitation that AJAX can only be used in the same source. CORS requires both browser and server support. Meanwhile, in the case of CORS cross-domain request, the browser divides it into simple request and non-simple request. Let me explain the simple request and non-simple request respectively.

A simple request

For simple requests, the browser simply issues a CORS request, specifically adding an Origin field to the header

Non-simple request

Non-simple requests are requests that have special requirements on the server, such as PUT or DELETE, or content-Type fields of Type Applicatin/JSON.

For CORS requests that are not simple requests, an HTTP query request is added before formal communication, which is called a precheck request.

3. Node.js intermediate proxy is cross-domain

The principle of implementing cross-domain proxy in node is roughly the same as that of nginx, which is to start a proxy server to forward data. The cookieDomainRewrite parameter can also be set to modify the domain name in the cookie in the response header to implement cookie writing in the current domain and facilitate interface login authentication.

4. Window. PostMessage across domains

PostMessage is an API in HTML5 XMLHttpRequest Level2

And the Window property is one of the few properties that can operate across domains. It can be used to solve the following problems:

Data transfer for pages and other new Windows that open

Message passing between multiple Windows

Page with nested IFrame message delivery

Usage: The postMessage(data, Origin) method takes two arguments

Data: The HTML5 specification supports any primitive type or copiable object, but some browsers only support strings, so it’s best to serialize the argument with json.stringify ().

Origin: protocol + host + port number. You can also set this parameter to *, indicating that it can be sent to any window.

5.WebSocket protocol is cross-domain

Websocket is a new protocol in THML5. It implements full-duplex communication between browser and server, and allows cross-domain communication. Socket. IO is used, which encapsulates webSocket interface well.

6. Document. Domain + iframe across domains

This method applies only to cross-domain scenarios where the primary domain is the same and the subdomains are different

The implementation principle is: the two pages are forced to set document.domain as the basic primary domain through JS, and the co-domain is realized.