Detailed introduction to cross-domain

To learn cross-domain strategy, you must first know why cross-domain:

The browser's same-origin policy, in order to prevent cross-site scripting attacks, prohibits client-side scripts (such as JavaScript) from Cross-site calls are made to services in different domains.

To be specific, if one of the protocol name, host, or port number requested by the website is different, the data transmission between the websites will form a cross-domain call.

All the examples in this article are performed using Node.js as the server. At the same time, examples are given of different port numbers. This time, 3001 and 3002 will be used

The port number.

First, build a form, as shown in the figure:

For normal non-cross-domain requests, it usually looks like this:

html：

Front-end js part (ajax)：

Server-side code:

Note: The content of the post method is read here using the formidable module of Node.js. All subsequent post data will use this module to accept

The result returned by the request page is:

The current return result belongs to the visit Port 3001, so what will it look like if you access port 3002?

right! This is what he has become! He does not allow you to access across port numbers! ! !

However, there is this output on the server console:

What does this mean? Next, attach the code and explain it bit by bit:

The ajax request part value has modified the url part:

That is Change the port number 3001 to 3002, and the rest is exactly the same as above.

The server code is the same as above, except that it listens to port 3002,

It can be found through the code that even if the port numbers are different, the server in ajax can still receive the data from the front desk.

is the data printed by the console above, indicating that it is not the server rejecting the cross-site request. , but when the server

received the data and processed the return, it was restricted and intercepted by the browser.

Of course, there are many ways to solve cross-domain restrictions. Here are four methods:

　 1. Use JSONP to implement cross-domain calls

　　First of all, let me borrow a paragraph to introduce JSONP:

　JSONP is a usage mode of JSON that can solve the cross-domain data access problem of mainstream browsers. The principle is to be affected by homologous strategies based on the XMLHTTPREQUEST object,

and & lt; script & gt; label elements are not affected by homologous strategies. JSON data. The

obtained using JSONP is not JSON data, but a JavaScript statement that can be run directly.

(1) Use Jquery’s $ajax to implement jsonp

At this time, the ajax request code is:

corresponding to the server The code is:

　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ccovar 　　 console will output: 　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cious; 　　Keep your eyes open, the server's method of accepting requests is get, but the ajax method of issuing requests is post,

　　　　Why is this? Please take a look at this stuff:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ute FILE] This is the http header information of the above request. The url actually passes parameters according to the get method, so the server uses the get method to accept the data. method,

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　castgeneatic in the script is limited by the format of the script, and the only way to use the get method is because the principle of jsonp is to use the <script> tag to send requests. The transmission form is: ;script src = 'http://localhost:3001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939'</script>

Add it to the head node and set src as the address. The request return result is:

## 　　　 It can be seen from the native script tag method that jsonp has the following weaknesses: It is sidelined, so events cannot be registered to listen for the status of the device, and errors cannot be found very well. 　

2.CORS implements cross-domain calls

　　　　　

Let me borrow another paragraph to introduce CORS:

　　 Cross-Origin Resource Sharing (CORS) is a browser technology specification that provides a method for Web services to transmit sandbox scripts from different domains to avoid The browser's same-origin policy is a modern version of the JSONP schema. Unlike JSONP, CORS also supports other HTTP requests in addition to the GET request method. Using

CORS allows web designers to use general XMLHttpRequest. This method has better error handling than JSONP. On the other hand, JSONP works on older browsers that don't support CORS. Modern browsers support CORS.

(1) Implementation of CROS

Ajax request code:

Server code:

The request return result is:

Okay, this completes the cross-domain call of CORS. Isn’t it very simple? This method is to add http header information when the server returns data. The most important thing is Access-Control-Allow-Origin,
. This header information represents the value of the domain name at the time of request. , and the rest can be learned about the specific details of CROS. For CORS, you only need to write these

header messages, and the browser will complete the rest for you.

The advantages of CROS are obvious. It can support multi-mode requests, get, post, put, etc. It still uses XmlHttpRequest for transmission

It can register events to monitor status, and the error handling method is good.

Of course, it also has its own shortcomings, that is, it does not support lower version browsers.　　

The above is the detailed content of Detailed introduction to cross-domain. For more information, please follow other related articles on the PHP Chinese website!