What is cross-domain?

Cross-domain is actually also called a non-same-origin policy request. When we talk about cross-domain issues, we have to first understand what is the same origin policy? Same-origin policy: It is a well-known security policy developed by Netscape. This strategy is now used by all browsers that support JavaScript. Same name means same domain name, same protocol, same port.

Domain name, protocol, port, all three are the same as the same, one of the differences is ** cross-domain ** web server: HTTP:/ / 127.0.0.1:3000 / index. HTMLInterface address: HTTP:/ / 127.0.0.1:4000 / listIn this project, the domain name is the same, the protocol is the same, the port number is different, cross domainCopy the code

Why cross domain?

Imagine that if there were no same-origin restrictions, when a user visited a malicious site, the site could execute scripts to obtain the user’s private information, with no security at all. Therefore, it is necessary to set the same origin limit to prevent attacks such as XSS.

How to resolve cross-domain?

JSONP

Script tags in HTML can be used to load JS in other fields, and the form of script SRC can be used to obtain data in other fields. However, because it is introduced through tags, the requested JSON format data will be run and processed as JS, which is obviously not acceptable. Therefore, it is necessary to package the returned data in advance and encapsulate it into a function for operation processing. The function name is passed to the background through the way of interface parameter transmission. After the background resolves to the function name, it “wraps” the function name on the original data and sends it to the front end. (JSONP requires the cooperation of the corresponding interface back end to implement) callback function

CORS

For a detailed introduction, please refer to this article by Teacher Ruan Yifeng

CORS is a W3C standard, which stands for “Cross-origin Resource Sharing”.

It 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. Currently, all browsers support this function, and Internet Explorer cannot be lower than Internet Explorer 10.

The entire CORS communication process is completed automatically by the browser without user participation. For developers, CORS communication is no different from same-origin AJAX communication, and the code is exactly the same. As soon as the browser discovers that an AJAX request crosses the source, it automatically adds some additional headers, and sometimes an additional request, but the user doesn’t feel it.

Therefore, the key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible.

For simple requests, the browser issues CORS requests directly. Specifically, add an Origin field to the header information.

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0.Copy the code

In the header above, the Origin field specifies the source (protocol + domain + port) from which the request came. Based on this value, the server decides whether to approve the request or not.

If Origin does not specify a licensed source, the server will return a normal HTTP response. The browser realizes that the response header does not contain the Access-Control-Allow-Origin field, and knows that something is wrong, throwing an error that is caught by XMLHttpRequest’s onError callback. Note that this error cannot be identified by the status code, because the status code for the HTTP response might be 200.

Personal Understanding: AJAX cross-domain implementation is the use of encapsulation of XHTMLHttpRequest object, XHTMLHttpRequest object cross-domain implementation of the CORS standard, that is, when the object issued cross-domain request will add origin in the HTTP request head, to explain which source the request comes from, Based on this value, the server can decide whether to approve the request or not. When the server returns an HTTP response, the browser checks to see if the response header contains the Access-Control-Allow-Origin field. If it does not, an error is thrown, which is caught by the ONError callback function of XMLHttpRequest. Axios is an HTTP client based on Promise for browsers and NodeJS, which is essentially a wrapper around native XHR, except that it is an implementation of Promise that complies with the latest ES specification

Axios >>> JQuery Ajax >>> XMLHttpRequest >>> HTTP request headers