What is cross domain and how to solve it? It's easy to understand, and it will take you to finish
Many current web projects are separated from the front end and the back end, which is particularly prone to cross domain problems
So what is a cross domain problem? This article will help you thoroughly understand what cross domain problems are and how to solve them
What is the phenomenon of cross domain?
Let's first take a look at the phenomenon of how cross domain problems occur, as shown in the following experiment
-
Front end: The browser is visiting a page: https://www.helloworld.net/special , this page sends an http interface of a backend
-
Back end: The back end interfaces accessed are: https://tiger-api.helloworld.net/v1/special/getSpecialList
The above prompt: has been blocked by CORS policy: Response to preflight request does not pass access control check
The translation is: Blocked by CORS policy: the response to the request failed the access control check
This means that you cannot access this interface without configuring related cross domain parameters
2. What are cross domain issues?
For example, when the browser accesses a page, such as https://www.helloworld.net/special
At this time agreement ， host ， port , respectively https , www.helloworld.net , eighty
In this page, the interface request sent agreement ， host , port It must be the same as the current page, and all three must be the same before it can be accessed
Otherwise, the above cross domain phenomenon will occur
For example, the browser opens the page https://www.helloworld.net/special ，
On this page, you can request an interface https://www.helloworld.net/getSpecialList
Because their protocols, hosts, and ports are the same, the request can be successful.
To sum up, in the browser, only when the protocol, host, and port are the same can they access each other. Otherwise, they cannot access each other
Note: In the browser
How are the three cross domain problems caused?
This problem is involved browser Of Homologous strategy
This is it. browser Of Homologous strategy , we can know from the above example
The so-called homology strategy is actually agreement ， host , port Only if they are the same can they access each other
Otherwise, as long as there is one difference, it cannot be accessed.
Note: Cross domain problems only occur in the browser because the browser has Homologous strategy , so there are cross domain problems
I always thought that the cross domain problem was caused by the browser Homologous strategy Is it possible to solve the problem by adding configuration points before the request
Why is it that the backend adds some configuration to the response header? Why the back-end? The cross domain problem is caused by the browser. What does it have to do with the backend?
From the above, we know that if the URL we access is not of the same origin, that is, the protocol, host, and port are different, it cannot be requested to pass
So here comes the question...:
- Why the request failed?
- Since the request fails, which stage of http is responsible for the failure?
- Is it because the browser intercepted the request and did not let it be sent?
- Or did the browser intercept the response, causing the problem?
The answer is that the request can be sent normally, and the backend can respond normally. The browser intercepts the response, so the beginning will appear
has been blocked by CORS policy: Response to preflight request does not pass access control check
It is easy to understand with a diagram, as shown below:
IV. How to solve cross domain problems
From the above figure, we can see that the browser intercepted the response (which has nothing to do with the request in the first phase), resulting in the failure of the entire http request
So, how to solve this problem, so that the interface can send and receive the response data normally?
It's easy to think of how to add some special fields in the response header. Once the browser sees these fields, it will not intercept them. Then the cross domain problem will be solved
In fact, that's exactly what I was curious about before. To solve the cross domain problem, why do we add some configuration to the back end? In fact, we add some special response headers to the response header
What are these special response headers?
Let's first see how www.helloworld.net solves the problem and what response header fields are added
Yes, as long as the backend adds the following fields in the response header when responding, the cross domain problem can be solved
-
access-control-allow-origin : This field is required. Its value is either when requested Origin The value of the field, either a * , indicating that the request for any domain name is accepted.
-
access-control-allow-credentials : This field is optional. Its value is a Boolean value, indicating whether cookies are allowed to be sent. By default, cookies are not included in CORS requests. Set to true , which means that the server explicitly grants permission. Cookies can be included in the request and sent to the server together. This value can only be set to true , if the server does not want the browser to send cookies, delete this field
-
Access-Control-Allow-Methods : This field is required. Its value is a comma separated string, indicating all cross domain request methods supported by the server. Note that all supported methods are returned, not just the one requested by the browser. This is to avoid multiple "pre check" requests.
In fact, the most important thing is access-control-allow-origin Field, add an * to allow all domains to access
Of course, there are other methods to solve cross domain problems. This article only talks about the most common methods. You can search for other methods yourself
V. Summary:
Through the above explanation, the summary is as follows
-
Same source policy: protocol, host and port are all the same, which means the same source. As long as there is a different source, it means different sources. Only resources from the same source can access each other
-
The cross domain problem is caused by the browser's same origin policy
-
The essence of the cross domain problem is that the browser intercepts the response, so the backend only needs to add the corresponding fields in the response header to solve the cross domain problem
And remember the picture below
