Summary of front-end cross-domain solutions

What is the homology strategy

Same Origin Policy / SOP (Same origin policy) is a convention introduced by the Netscape company in 1995. It is the core and most basic security function of the browser. If the same origin policy is missing, the browser is vulnerable to XSS , CSFR and other attacks. The so-called homology means that the "protocol + domain name + port" are the same, even if two different domain names point to the same ip address, they are not homologous.

The same-origin policy limits the following behaviors:

IndexDB, LocalStorage and Cookies cannot be read
Js object and DOM are not available
AJAX request cannot be sent

Same source needs: ( <img><link><script>three kinds of tags are not restricted)

We can summarize six common cross-domain scenarios based on the definition of the same-origin policy:

In the above situations, according to the technology we apply, we can summarize nine cross-domain solutions:

Common ways to achieve cross-domain

Cross-domain via jsonp

Using <script>tags that have no cross-domain restrictions, web pages can obtain JSON data that is dynamically generated from other sources. JSONP requests must be supported by the other party's server. The advantage is that it is compatible with older browsers, but it only supports get and is not very safe, generally not used. Based on this principle, we can dynamically create scriptand then request a URL with parameters to achieve cross-domain communication.

Disadvantages of jsonp: only one request can be achieved.

var script = document.createElement("script");
script.type = "text/javascript";

//传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src =
  "http://www.baidu.com:8080/login?user=admin&callback=handleCallback";
document.head.appendChild(script);

//回调执行函数
function handleCallback(res) {
  console.log("res =", res);
}

CORS cross domain

The cross-domain request was actually sent, but it was intercepted by the browser, because it is not safe. To put it bluntly, you want to get something from the server, but it has not been approved by others . So what is safe? If the server allows it, it is safe. This is the principle of CORS implementation: use an additional HTTP header to tell the browser that the web application running on a certain origin allows access to the specified resources from different origin servers .

Currently, all major browsers support CORS, among them,The version of IE browser cannot be lower than 10, IE 8 and 9 need to be implemented through XDomainRequest.

Simple request

If requestedMeet all the following conditions, Then the request can be regarded as a "simple request":

One of the allowed methods:

The Fetch specification defines a set of header fields that are safe for CORS

No artificial setting of header fields other than this collection. The collection is:

Accept
Accept-Language
Content-Language
Content-Type (Need to pay attention to additional restrictions)
DPR
Downlink
Save-Data
Viewport-Width
Width

Content-Typ The value of is limited to one of the following three:

text/plain
multipart/form-data
application/x-www-form-urlencoded

Preflight request

And the different simple request, "request need preflight" requirement must first OPTIONSmethod of pre-screening initiate a request to the server, the server is allowed to know the actual request.