web前端解决跨域问题

梦里梦外; 2022-05-17 12:46 254阅读 0赞

<a href="\#001">1.JSONP</a>  
<a href="\#001">2.JQuery发送AJAX、JSONP请求</a>

</br>

<h3 id="001">1.JSONP</h3>

JSONP利用JavaScript的动态性做到不考虑同源策略发送请求。  
　　JSONP一般使用动态创建script标签将其src指向到要发请求的资源地址并附带参数为回调函数的名称的方式，在请求完成后服务端返回以`函数名(数据)`;的方式进行回调函数达到请求成功的目的。

data.php：

<?php 
        $cbName = $_GET['cb'];//获得回调函数名称
        //拼接回调函数
        echo $cbName.'({"p1":"对象参数"},"参数2")';
     ?>

JSONP方式请求data.php

当请求成功时，返回的数据等同于

</br>  
</br>

<h3 id="002">2.JQuery发送AJAX、JSONP请求</h3>

JQuery把发送异步请求封装的很好，很方便使用。  
其中有

$.ajax(url,[settings])
    load(url,[data],[callback])
    $.get(url,[data],[fn],[type])
    $.getJSON(url,[data],[fn])
    $.getScript(url,[callback])
    $.post(url,[data],[fn],[type])```
    只需```$.ajax(url,[settings])```函数就可以发送异步AJAX或者JSONP。
    
    
    
    发送AJAX请求：
    
    ```html
    
           $.ajax({
               type:'get',  //请求方式
               url:'http://127.0.0.1/configs/ajaxs', //请求资源
               data:"name=林&age=119",  //参数
               dataType:'json', //请求类型 xml json text html script jsonp
               success:function(data){ //请求成功回调
                   console.log(data);
               },
               error:function(data){ //请求失败回调
                   console.dir(data);
               }
           });

发送JSONP请求：

$.ajax({
                url : 'http://127.0.0.1:53880/cross/data.php', //请求资源地址
                data : "name=林&age=119", //参数
                jsonp:'cb',//回调函数标识符参数键
                jsonpCallback:'haha',  //回调函数最后会在success中回调结果，不用设置该参数会有默认的
                dataType:'jsonp',  //jsonp方式请求
                success:function(data){ //回调函数
                    console.dir(data);
                }
            });

</br>  
</br>  
</br>  
</br>  
</br>