Cross-domain means that the browser cannot execute scripts from other websites. It is caused by the browser’s same-origin policy, which is a security restriction implemented by the browser on JavaScript. To understand why cross-domain, we need to know what the same-origin policy is
1. Same origin strategy
Same source: If the protocol, domain name and port of two pages are the same, then the two pages have the same origin. If any of the protocol, domain name and port of two pages are different, it is called cross-domain
Same origin policy (English full name Same origin policy) is a security feature provided by browsers.
The concept given by MDN official: The same-origin policy restricts how documents or scripts loaded from the same source interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.
Popular understanding: The browser stipulates that the JavaScript of website A does not allow resource interaction with non-homogeneous website C, for example:
- Unable to read Cookie, LocalStorage and IndexedDB of non-original web pages
- Unable to access the DOM of non-original web pages
- Unable to send Ajax request to non-original address,
Note: http://localhost:8080 and http://127.0.0.1:8080 are not from the same source. That is to say, even if the IP addresses are the same, one is the domain name and the other is the IP address. Nor are they of the same origin. That is, cross-domain
Cross-domain:Same origin means that the protocol, domain name, and port of the two URLs are consistent; otherwise, it is cross-domain< /strong>.
The root cause of cross-domain occurrence: The same-origin policy of the browser does not allow resource interaction between non-original URLs.
The following is the browser’s interception of cross-domain requests:
Note: Browsers allow cross-domain requests, but the data returned by cross-domain requests will be intercepted by the browser and cannot be obtained by the page!
The following table gives the same origin detection relative to the http://www.test.com/index.html page for everyone to understand the same origin and cross-domain:
| URL | Whether it has the same origin | Reason strong> |
|---|---|---|
| http://www.test.com/other.html | Yes | Same origin (same protocol, domain name, port) |
| https://www.test.com/about.html | No | Different protocols (http and https) |
| http://blog.test.com/movie.html | No | The domain names are different (www.test.com and blog.test.com) |
| http://www.test.com:7001/home.html | No | The ports are different (default port 80 and port 7001) |
| http://www.test.com:80/main. html | is | same origin (same protocol, domain name, port) |
2. Cross-domain solution
Nowadays, there are three main solutions to implement cross-domain data requests, namely JSONP, CORS, and cross-domain proxy.
2.1、JSONP
JSONP (JSON with Padding) appeared early and has good compatibility (compatible with lower versions of IE). It is a temporary solution that front-end programmers are forced to come up with in order to solve cross-domain problems. The disadvantage is that it only supports GET requests and does not support POST requests.
Principle: The