前端面试之跨域请求

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhang070514/article/details/77604517

背景

跨域是由浏览器的同源策略引起的,是指页面请求的url地址,必须与浏览器上url地址处于同域上(即域名,端口,协议相同)。这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对javascript施加的安全限制。


一、解决本地(使用文件协议)的跨域请求问题
首先创建一个test项目,在此项目中创建demo2.html文件,在data文件夹下新建一个mydata.json文件用来存储我们要访问的数据。
html中代码很简单,只有一个ajax请求。代码如下:

<script>
        $(function(){
            //alert(1);
            $.ajax({
                type:'get',
                url:'../data/mydata.json',
                success:function(data){
                    console.log(data);
                },
                error:function(){
                    console.log('error');
                }
            });
        })
    </script>

在浏览器中运行,结果…..就报错了:
这里写图片描述

解决这个问题百度上有好多答案,具体操作:右键浏览器快捷方式,选择属性,在目标中添加–allow-file-access-from-files即可。

这里写图片描述

这样我们就能访问到数据了。(注意:如果还是报错,就以管理员身份运行浏览器)。


二、解决外网跨域请求问题。

为了模拟真实的网络环境,我将之前创建的test项目放到tomcat的webapp下,然后运行tomcat。同时将html中的ajax访问的url地址改为淘宝免费提供的一个API接口https://suggest.taobao.com/sug?code=utf-8&q=手机,点击这个地址可以获取到相应的json数据。

这里写图片描述

浏览器的地址是tomcat地址,而请求数据的地址是淘宝的地址,这肯定已经存在跨域问题了。ok,准备好之后,运行,不出我们预料,报错了…

这里写图片描述
这里我们提供两种解决方法:
第一种,使用jsonp协议, jQuery中的$.ajax方法也直接支持使用该协议进行跨域访问。代码就是在之前的ajax参数中再增加一个dataType:’jsonp’参数。同时我们又增加了一个dataFiter方法,你可以在这个方法内对返回的json数据进行预处理,比如过滤、更改数据等。我增加的目的主要是跟第二种方法做对比,这个后面再说。代码如下:

$.ajax({
                type:'get',
                dataType:'jsonp',
                url:'https://suggest.taobao.com/sug?code=utf-8&q=手机',
                //url:'../data/mydata.json',
                 dataFilter:function(json){    
                    console.log(json);  
                    return json;    
                },
                success:function(data){
                    console.log(data);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });

结果就访问到我们需要的数据了:注意打印的undefined是我们上面的dataFilter方法打印的。

这里写图片描述

第二种,使用jquery提供的一个插件jquery-jsonp,这是下载地址https://github.com/congmo/jquery-jsonp。下载后以后像引入jquery一样在html页面引入。代码如下:

    $.jsonp({
                type:'get',
                url:'https://suggest.taobao.com/sug?code=utf-8&q=手机',
                callbackParameter:"callback", 
                   dataFilter:function(json){   
                     console.log(json);   
                    return json;  
                },
                //url:'../data/mydata.json',
                success:function(data){
                    console.log(data);
                },
                error:function(msg){
                    console.log(msg);
                }
            });

看起来跟上面的ajax方法差不多,注意在这里多了callbackParameter:”callback”这行代码,不加是会报错的。结果如下:第一个object对象是dataFilter方法打印的,第二个是我们在success方法中获取的数据。
这里写图片描述

数据获取到了,跨域问题解决了。最后我们再说一下dataFilter这个方法:
jsonp的dataFilter中的数据直接转换成json对象了,而ajax的dataFilter中获取的却是原生的带callback方法名的json字符串(控制台打印出来的是undefined)。如果需要对返回的数据进行预处理的话,建议使用jquery插件jquery-jsonp的$.jsonp方法。

展开阅读全文

没有更多推荐了,返回首页