The cross-domain problem is a common difficulty in front-end development, and its appearance is mainly due to the same-origin policy of the browser. The so-called same-origin policy means that browsers only allow scripts under the same domain name to access each other's data, and do not allow data interaction between different domain names. Although this restriction helps to ensure the security of user data, it also brings a lot of trouble to development.
1. What is a cross-domain problem
Before talking about cross-domain issues, let's first understand what homology is. The same origin means that the protocols, domain names, and port numbers are all the same. For example, http://www.example.com and https://www.example.com do not belong to the same origin.
The cross-domain problem means that when a request is initiated from one source (protocol, domain name, port number), but its response is returned to another source, the browser will report a cross-domain error.
2. The performance of cross-domain problems
When we send a request to the backend through AJAX, Fetch, etc. in the front-end page, if the target address of the request does not belong to the same source as the current page address, then there will be a cross-domain problem. At this time, the browser will block the sending of the request and output the following error message in the console:
Access to XMLHttpRequest at ‘http://example.com/api’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
3. Solutions to cross-domain problems
1. JSONP
JSONP is a cross-domain solution that takes advantage of the cross-domain nature of script tags. When using JSONP, we need to dynamically create a script tag in the front-end page, and use the request address as the src attribute value of the script. After the backend receives the request, it returns a function call string that contains the data we need. After the front-end page receives the response, it will automatically execute the function.
Disadvantage: only supports GET request, does not support other request methods such as POST.
2. CORS
CORS (Cross-Origin Resource Sharing) is a cross-domain solution, which is a standard proposed by W3C. CORS achieves cross-domain access by setting response header information on the server side. Set the Access-Control-Allow-Origin header information on the server side to allow the specified origin to access the resource.
Cons: Requires server-side support.
3. Proxy
Proxy is a common cross-domain solution. Its principle is to send the request in the front-end page to its own server, and then the server sends the request to the target address, and returns the response result to the front-end page. This avoids the browser's same-origin policy restrictions.
Disadvantages: You need to build your own server, which increases the complexity of the system.
Four. Summary
Cross-domain issues are common difficulties in front-end development, but we can solve them through JSONP, CORS, proxy, etc. In actual development, we need to choose the appropriate solution according to the specific situation. At the same time, we also need to pay attention to data security issues to avoid security issues such as data leakage caused by cross-domain.