ajax跨域终极解决办法！

Posted 2020-09-29 帅到要去报警

在使用 ajax 的时候，往往需要通过 ajax 跨域请求一些？

但是 XMLHTTPRequest 是不支持跨域的，所以产生了 JSONP 这个东西来解决跨域，当然解决跨域的方式有很多种....

第一种解决跨域：

<script type=‘text/javascript‘ >
(function(window){
    //AJAX获取界面信息
    $(function(){
        $.ajax({
            // 豆瓣API接口 
            url:‘http://api.douban.com/v2/movie/in_theaters?count=2‘,
            dataType:"jsonp",
            jsonp:"callback",
            success:function(data){
                console.log(data);
            }
        });    
    });
})(window);
</script>

这种解决跨域的方式，能够解决一些常规的业务逻辑，但是如果请求：天气的API接口就会有问题

url:‘http://www.weather.com.cn/data/sk/101010100.html‘

第二种解决跨域：

可以再本地的服务器上获取其他服务器的信息，在通过ajax请求本地服务来实现：

<?php  
header("content-type:text/html;charset=utf-8");  
//php代理获取天气信息  
//跨域请求  
//天气预报接口  
$url = "http://www.weather.com.cn/data/sk/101010100.html";  
$cont = file_get_contents($url);  
echo $cont;  
?>  

接下来使用 ajax 去请求本地的这个PHP文件即可：

<script type=‘text/javascript‘>
$(‘input.submit‘).click(function(){
    $.ajax({
        url:"weather.php",
        async:true,
        success:function(result){
            eval("var info="+result); 
            console.log(info[‘weatherinfo‘][‘city‘]);
        }
    });
});
</script>

还有其他的方式来解决跨域，同样是通过JSONP的方式，我们可以自己编写JSONP文件，来解决跨域问题：