Home > Article > Web Front-end > Detailed introduction to same-origin and cross-domain front-end interviews
Cross-domain is caused by the browser's same-origin policy. It refers to the url address requested by the page. It must be in the same domain as the url address on the browser (that is, the domain name, port, and protocol are the same). The following article explains Let me introduce to you the relevant information about the same origin and cross-domain that are necessary for front-end interviews. The article introduces it in detail through sample code. Friends who need it can refer to it.
Preface
As we all know, the browser’s same-origin strategy and cross-domain methods are also issues with a high appearance rate in front-end interviews. This article I mainly shared with you about the same-origin and cross-domain issues that will be encountered during front-end interviews. I won’t go into more details below. Let’s take a look at the detailed introduction.
What is the same-origin policy
The same-origin policy is used to restrict how documents or scripts loaded from one source can interact with documents or scripts loaded from another source. It is a key security mechanism for isolating potentially malicious files.
What is the same origin?
If the protocol, domain name and port are the same for two pages, then the two pages are of the same origin. For example: http://www.hyuhan.com/index.html For this website, the protocol is http, the domain name is www.hyuhan.com, the port is 80 (default port), and its origin is as follows:
http://www.hyuhan.com/other.html: same origin
http://hyuhan.com/other.html: different origin ( Different domain names)
https://www.hyuhan.com/other.html: Different sources (different protocols)
http:/ /www.hyuhan.com:81/other.html: Different sources (different ports)
The same-origin policy is to protect the security of user information. The main restrictions restricted by the same-origin policy are The following behaviors:
Cookie, LocalStorage and IndexDB cannot be read
DOM cannot be operated
AJAX request cannot be sent
How to perform cross-domain access
How to perform cross-domain AJAX request
There are three main methods to bypass the restrictions of the same-origin policy and make cross-domain AJAX requests.
JSONP
JSONP is a common method for cross-domain communication between the client and the server. Use the cross-domain