This is the 18th day of my participation in the First Challenge 2022

First, the concept of cross-domain

Cross-domain occurs when A client obtains A page from one site A and then accesses resources from another site B on that page. When using the XMLHttpRequest object in the front end to send a request to the server, there is a cross-domain limitation that the browser limits for security purposes. The client can successfully send the request to the server, but it cannot receive the data back from the server.

Second, cross-domain solutions

Scheme 1: JSONP

The json principle

Jsonp takes advantage of the fact that there are no cross-domain restrictions when sending requests using script tags on the browser side. It uses the script tag to send the request, defines a callback function on the client, sends the request, passes the name of the callback function to the server, and then the server returns the call of the callback function to the client. The data that the server wants to send to the client is wrapped in the callback function, so it gets the data. Finally, the data is processed in the callback function and displayed on the page.

Examples of JSONP solving cross-domain problems

Take 360 Search for example. 360 search for this page is: www.so.com/, when the user enters a search term in the search box, the browser will go back to another site (sug.so.360.cn/suggest) to obtain the data of the term related to the user’s search term. These two data acquisition visits different sites, so there will be cross-domain problems. And 360 search here is the use of JSONP to solve the cross-domain problem. Its callback function, and transfer data as shown below:

The json characteristics

Jsonps is an early cross-domain solution with good compatibility. But because JSONP uses script tags to send requests, it can only be used to solve the cross-domain problem of sending request outputs in GET mode, and it needs to be handled on both client and server sides. Therefore, when a lot of data needs to be passed, jSONP is not a desirable way to solve cross-domain problems.

Scheme 2: CROSS-domain CORS

Principle of cors

The principle of CORS is that when sending a request to the server, the server sends a response header to the client to tell the client (browser) that the data can be accessed, thus realizing cross-domain resource sharing.

Cors solves cross-domain problem cases

After the response headerhttp://127.0.0.1Represents the site where the user requests data from the current page to another site, corresponding to site A mentioned above. If this value is *, it means that all sites can obtain these data, which means there is no cross-domain problem. It is generally impossible to do so, especially for some confidential data, privacy data, so doing is extremely insecure.

Characteristics of cors

Cors is a late cross domain solution, because the Access-Control-Allow-Origin response header is a late HTTP protocol, if the browser does not support this response header will not use CORS, so it is not compatible. But CORS only needs to configure the server, and get and POST requests.

Other schemes: Background server forwarding

Because no cross-domain restrictions between servers, so when the browser needs in the site to site B to get the data, can let the browser sends A request to the site A and then let the site of A server sends A HTTP request to the site B response returned to the relevant data, and then by the site A response to the relevant data to the browser, which solve the cross-domain restrictions.