The same-origin policy is a well-known security policy proposed by Netscape. All browsers that support JavaScript now use this strategy. The so-called homologous means that the domain name, protocol, and port are the same. When the two tab pages of a browser are opened to Baidu and Google pages respectively, when the Baidu tab page of the browser executes a script, it will check which page the script belongs to, that is, check whether it has the same origin, only the same as Baidu source scripts will be executed. If it is not the same origin, when requesting data, the browser will report an exception in the console, indicating that access is denied.
Due to the same-origin policy, when we use ajax to request resources, we cannot request cross-domain requests, which means that they must be the same domain name, protocol, and port. But when we develop, we often need to request data from other servers (cross-domain), one of which is jsonp.
Also mentioned, json data format is generally used to transfer data, because javascript natively supports json format, so it is very convenient to use. Don't confuse json and jsonp, they are not a dimensional thing at all! ! ! For example, if two Chinese people have a conversation, json is Chinese (specific content), and jsonp is the way two people communicate (with their mouths).
【What is jsonp? 】
We all know that script tags can be requested across domains. For example, when we introduce jquery.js, we often use resources on the CDN, and we do not actually download the jquery.js file to our own server. Then, using the feature that script can request cross-domain, we can request resources from other servers. This technique is also known as jsonp. It is useless to say more, the following is a simple example, after reading it, I believe you will be able to understand the principle of jsonp.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var demo1 = function (data) {
alert("I am the data sent by jsonp in the background: " + data.name);
}
</script>
<script src="http://remote server domain name or ip address/jsonp/jsonp.js"></script>
<!--In order to protect my server from attacks, I will not release my server address-->
</body>
</html>
The requested server has the corresponding jsonp.js (named itself, not necessarily jsonp.js) this file, the code inside is as follows:
demo1({"name": "lin"}); /*JS code on the remote server,
That is to say, we can pass the data on the server to the function, and then the remote data will be obtained when the html is executed*/
The html file is rendered as follows, and it can be seen that the data of the remote server has been requested:
Workflow analysis: We first define the demo1 function in html, and then introduce the remote jsonp.js file, which executes the demo1 function defined by html (the parameter passed in during execution is the data to be passed). In this way, html also obtains the data of the remote server in disguise.
Summary: The script tag is also a simple get request. The server processes the get request and returns a function. The parameters passed into the function are the data that the client wants to get. In fact, not only script can make cross-domain requests, as long as there are tags with src attribute, they can use the same principle to make cross-domain requests, such as img, iframe
.