当前位置：网站首页>Cross domain and jsonp details

Cross domain and jsonp details

2022-07-06 04:07:00 【Concision.】

Cross domain and JSONP Detailed explanation

1. Homology
2. The same-origin policy
3. Cross domain

1. Homology

If two pages agreement , Domain name and port All the same , The two pages have the same source .

for example , The following table shows the relative http://www.test.com/index.html Page homology detection ：

2. The same-origin policy

The same-origin policy （ English full name Same origin policy） It's a browser Safety features . The same-origin policy Limit from The same source How the loaded document or script relates to the one from Another source Interact with other resources . This is an important security mechanism for isolating potentially malicious files .
Insert picture description here

3. Cross domain

Homology refers to two URL The agreement 、 domain name 、 Port consistency , conversely , It's cross domain .
The root cause of cross domain ： The same source strategy for browsers Don't allow Not homologous URL Interact with resources .

Browser interception of cross domain requests

Insert picture description here

How to implement cross domain data requests

Implement cross domain data requests , The two main solutions ： JSONP and CORS.

JSONP： It's early , Compatibility is good. （ Compatible with lower versions IE）. It's the front-end programmer to solve cross domain problems , Forced to come up with a temporary solution . The disadvantage is that it only supports GET request , I won't support it POST request .
CORS： Late appearance , It is W3C standard , Cross domain Ajax The underlying solution to the request . Support GET and POST request . The disadvantage is that it is not compatible with some lower versions of browsers .

JSONP

JSONP (JSON with Padding) yes JSON A kind of “ Usage mode ”, can Used to solve the problem of cross domain data access of mainstream browsers .
Due to the restriction of browser homology strategy , Can't pass... In the web page Ajax Request non homologous interface data . however <script> label Not affected by browser homology policy , Can pass src attribute , Request non homologous js Script .
Realization principle ： It's through <script> Labeled src attribute , Request a cross domain data interface , And in the form of function calls , Receive the data returned from the cross domain interface response . For detailed use, please refer to The blog

<body>
    <script>
        function abc(data) {
    
            console.log('JSONP The data returned in response is ：')
            console.log(data)
        }
    </script>

    <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>

</html>

JSONP The shortcomings of

because JSONP It's through <script> Labeled src attribute , To achieve cross domain data acquisition , therefore JSONP Only support GET Data request , I won't support it POST request .
JSONP and Ajax There is no relationship between , Can't take JSONP The way to request data is called Ajax, because JSONP Not used XMLHttpRequest This object .

jQuery Medium JSONP

jQuery Provided $.ajax() function , In addition to initiating real Ajax In addition to data requests , Can also initiate JSONP Data request , for example ：

 $.ajax({
    
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    //  If you want to use  $.ajax()  launch  JSONP  request , Must specify  datatype  by  jsonp
    dataType: 'jsonp',
    success: function(res) {
    
       console.log(res)
    }
 })

Be careful ： By default , Use jQuery launch JSONP request , Will automatically carry a callback=jQueryxxx Parameters of ,jQueryxxx Is the name of a randomly generated callback function . If you want to customize JSONP The parameters of the callback function and the name of the callback function , You can specify... With the following two parameters ：

 $.ajax({
    
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    //  Parameter name sent to the server , The default value is  callback
    jsonp: 'callback',
    //  Custom callback function name , The default value is  jQueryxxx  Format 
    jsonpCallback: 'abc',
    success: function(res) {
    
       console.log(res)
    }
 })