web前端-解决跨域的方法

1. 后台代理（PHP代理）:跟前端无关（中间人）

让后台的编程语言去访问，PHP访问其他域下的资源数据返回PHP
php语法：$res=file_get_contents('访问的网络地址');echo $res

2. jsonp跨域(只支持get）

实现原理：动态创建script标签里面的src属性可以访问浏览器上的任意资源，不产生跨域，让src去访问要请求的资源，服务器接受请求，并返回数据，前端需要声明一个函数来接收后台返回的数据
实例1：百度搜索的接口数据

1. 百度搜索内容使用jsonp跨域格式获取的；
2. 网址：http://suggestion.baidu.com/su?cb=callback&wd=a
3. 参数：cb：百度后台接受的变量，函数名；wd：搜索框的内容

<script>
function callback(res){
	console.log(res);
}
</script>
<script src='http://suggestion.baidu.com/su?cb=callback&wd=a'></script>

实例2：动态获取百度接口的数据

1. 获取用户输入的的内容——搜索内容
2. 请求百度的接口数据——查询
3. 利用jsonp实现：动态创建script标签，利用src属性访问接口

<h4>动态获取百度搜索接口数据</h4>
<input type="text" id="input">
<button type="button" id="search">搜索</button>

<script>
    var body=document.getElementsByTagName('body')[0];
    var search=document.getElementById('search');

    search.onclick=function(){
        var input=document.getElementById('input').value;
        var script=document.createElement('script');
        script.src=`http://suggestion.baidu.com/su?cb=callback&wd=${input}`
        body.appendChild(script);
    }

    function callback(res){
        console.log(res);
    }
    
</script>

实例3：jQuery封装的跨域请求

<script>
//语法：
    $.ajax({
        type:'get', //jsonp 跨域只有get请求
        url:'接口',
        data:{wd:'前端传输的内容'},
        dataType:'jsonp',   //必须写
        jsonp:'',   //后台定义的接受函数的名字，比如百度的cb
        jsonpCallback:'',   //前端接受的函数名，不写默认生成一个jquery+数字
        success:function(){
            //成功，数据传输到这里
        }
    })
</script>

<h4>jquery 封装的跨域请求</h4>
<input type="text" id="input">
<button type="button" id="search">搜索</button>
<script src="jQuery-1.12.4.js"></script>
<script>
    $('#search').click(function(){
        var input=$("#input").val();
        console.log(input);
        $.ajax({
            type:'get', //jsonp 跨域只有get请求
            url:'http://suggestion.baidu.com/su?cb=callback&wd='+input,
            // data:{
            //     wd:'input'
            // },
            dataType:'jsonp',   //必须写
            // jsonp:'cb',   //后台定义的接受函数的名字，比如百度的cb
            jsonpCallback:'callback',   //前端接受的函数名，不写默认生成一个jquery+数字
            success:function(res){
                console.log(res);
            }
        })
    })
</script>