In the front-end field, cross-domain means that the browser allows cross-domain requests to be sent to the server, thereby overcoming the limitation that Ajax can only be used on the same origin .
The same-origin policy is a convention introduced by Netscape in 1995 to browsers. It is the core and most basic security function of browsers. Without the same-origin policy, browsers are vulnerable to attacks such as XSS and CSFR. The so-called homology means that "protocol + domain name + port" are the same, even if two different domain names point to the same IP address, they are not of the same origin.
The same-origin policy restricts the following behaviors:
- Cookies, LocalStorage and IndexDB cannot be read
- DOM and JS objects cannot be obtained
- AJAX request could not be sent
Table of contents
Why do browsers restrict cross-domain access?
Cross-Origin Resource Sharing (CORS)
What is cross domain?
Cross-domain refers to requesting resources of another domain name from a web page of one domain name. For example, request www.google.com resources from www.baidu.com page. But in general, this cannot be done. It is caused , which is a security restriction imposed by the browser on JavaScript . A stricter definition of cross-domain is: as long as the protocol, domain name, and port are any different, it is regarded as cross-domain .
The so-called same origin means that the domain name, protocol, and port are all the same. As long as there is one difference, it is cross-domain.
Notice:
First, if it is a cross-domain problem caused by the protocol and port, the "foreground" is powerless,
Second: On cross-domain issues, the domain is only identified by the "header of the URL" without trying to determine whether the same ip address corresponds to two domains or whether the two domains are on the same ip.
The URL format consists of three parts: the protocol, the IP address of the host where the resource is stored, and the specific address of the host resource
Why do browsers restrict cross-domain access?
The reason is security
If a web page can freely access the resources of another website, then there may be security issues without the customer's complete knowledge. For example, the following operations have security issues:
1. The user visits www.mybank.com, logs in and performs online banking operations. At this time, cookies are generated and stored in the browser
2. The user suddenly remembered something, and stumbled to visit an evil website www.xiee.com. At this time, the website can get the bank's cookies in its page, such as user name, login token, etc. Then initiate the action on www.mybank.com.
3. If the browser does not restrict it at this time, and the bank does not respond to the security processing, then the user's information may be leaked.
The purpose of using cookies on the website is to identify the user's identity, record the user's login status, track and count the user's habit of visiting the website, identify the user's identity, and save customer information, etc. 1. Through the data stored on the user's local terminal, the website can obtain accurate portraits of visitors, provide accurate product information, increase the conversion rate of the page and delay the dwell time of the page, thereby improving and speeding up the user's website experience. --Baidu Encyclopedia
Why cross-domain?
Since there are security issues, why do we need to cross domains? Sometimes there are multiple different subdomains within the company, for example, one is location.company.com, and the application is placed in app.company.com, then you want to access the resources of location.company.com from app.company.com Belongs to cross-domain.
How to solve cross domain?
Front-end solution
https://zhuanlan.zhihu.com/p/81809258This article is a java article, advocating to solve cross-domain problems from the backend;
rear end
Cross-Origin Resource Sharing (CORS)
The Web working group of W3C recommended a new mechanism, Cross-origin Resource Sharing (CORS for short). In fact, this mechanism is to achieve cross-site access control, making it possible to safely carry out cross-site data transmission.
The server's support for CORS is mainly done by setting Access-Control-Allow-Origin. If the browser detects the corresponding settings, it can allow ajax to access across domains.
Just add response headers in the background to allow domain requests! Add settings to the requested Response header to achieve cross-domain access!
Create a filter to implement the backend settings to allow cross-domain access:
A java backend filter:
@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}