当前位置：IT橙子的前端技术博客 > 前端笔记 > 正文

什么是跨域？前端如何解决跨域问题？

时间：2018-04-27 来源：未知 分类：前端笔记 阅读：

前端在项目开发中经常会在前后端交互的环节出现跨域问题，最近看到一篇对前端跨域解释比较全面的文章，这里分享给大家。
 
什么是跨域？
跨域是由浏览器的同源策略引起的，是指页面请求的url地址，必须与浏览器上url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对javascript施加的安全限制。
 
当浏览器的地址是一个域名，而请求数据的地址是另外一个域名，这就存在跨域问题了。如下图：


 

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

$.ajax({
        type:'get',
        dataType:'jsonp',
        url:'https://suggest.taobao.com/sug?code=utf-8&q=手机',
        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);
        }
 });
  

第二种，使用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; 
},
      	success:function(data){
      		console.log(data);
    },
       	error:function(msg){
       		console.log(msg);
   }
});

看起来跟上面的ajax方法差不多，注意在这里多了callbackParameter:”callback”这行代码，不加是会报错的。最后我们再说一下dataFilter这个方法：jsonp的dataFilter中的数据直接转换成json对象了，而ajax的dataFilter中获取的却是原生的带callback方法名的json字符串（控制台打印出来的是undefined）。如果需要对返回的数据进行预处理的话，建议使用jquery插件jquery-jsonp的$.jsonp方法。
-------------------------------------------正文完~-------------------------------------------

关于橙子

    橙子，一个奋斗在前端路上的女程序员~~

    橙子，热爱前端，关注前端，4年的前端工作经验，熟练掌握前端各项技能，熟练多种前端框架，希望遇到志同道合的前端朋友们，一起学习交流，共同进步！

学习交流

  • 微信公众号：IT橙子6 微信扫一扫添加关注 获取更多前端学习资料！
  • QQ交流群：592969963 IT橙子前端技术交流群

相关推荐