什么是跨域-怎么使用Ajax进行跨域请求

a.jpg
    今天下午一家面试,招的Web前端开发工程师,问了比较多的前后端交互,这边也记录一下。
这篇文章主要谈的是Ajax跨域请求,同时了解什么是跨域以及如何实现跨域。
    首先我们来谈谈什么是跨域请求:
        从文字上理解,跨域-跨区域,而这个区域往往代表着我们多台应用服务器(或者说资源路径),这是浏览器对于JavaScript同源策略的一种检查约束,在我们去访问某个站点,而这个站点去其他站点请求某些数据时,就可能会发生跨域问题,因为浏览器判断它们两个站点是单独的,不是同一个服务器里的。
    而浏览器如何判断其是否跨域呢?请看下图
b.jpg
现在了解在什么情况下属于跨域请求,也知道什么是跨域,那么接下来就是谈如何解决了。举个例子,像我们使用Ajax请求时,代码如下(这里请求的是聚合数据API,key我就以XXX代替了-手动滑稽):
$.ajax({
    url:"http://apis.juhe.cn/ip/ipNew",
    type:"get",
    data:{
        ip:"122.114.8.243",
        key:"XXXXX"
    },
    dataType:"json",
    success:function(data){
        alert("yes!");
    },
    error:function(data){
        alert("error!");
    }
});

像这段代码看上去如果请求成功应该是弹出yes!,但实际上我们发出请求后会发现弹出的是error!,这个时候我们F12进入开发者工具会发现页面有报错,如下图:
c.jpg
    奇怪的是Http状态码返回正常-200,也就是代表该次请求成功,但是因为同源策略导致浏览器认定为错误。
那像这种情况我们有多种方法解决,这里就主要提两点(较常用):
    第一点(源站放行):以Java为例,首先,跨域的产生无非是源站不允许跨站加载,那么我们改成允许就可以了。在ResponseHeader头中加入我们自定义的参数,代码如下(我们也可以使用过滤器进行配置,根据实际需要来即可):
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers:","Origin, X-Requested-With, Content-Type, Accept");
    第二点(jsonp):这种方法只能用于get请求,并且在开发中不建议使用,因为不安全,他其实就是通过动态的创建<script>来跳过检查最终通过回调得到数据。这次还是以上面的Ajax代码为例,只要修改dataType为jsonp即可,代码如下:
$.ajax({
    url:"http://apis.juhe.cn/ip/ipNew",
    type:"get",
    data:{
        ip:"122.114.8.243",
        key:"XXXXX"
    },
    dataType:"jsonp",
    success:function(data){
        alert("yes!");
    },
    error:function(data){
        alert("error!");
    }
});
修改之后我们会发现报错消失,并且成功取得数据,如下图:
d.jpg
    当然还有几种,比如反向代理,而反向代理相当于把请求的任务交给了自己的服务器(中介)个人觉得麻烦o_o。
    到这里,关于跨域的问题就已经清楚了,大家可以根据实际情况来选择对应的方案。其实这块我也是新手,如果觉得有错误欢迎在文章下留言哦,不胜感激!
作者:徐先森 文章名: 《什么是跨域-怎么使用Ajax进行跨域请求》
收录情况: 百度已收录
版权说明:若无特别注明,本文皆为 "徐博客”原创,转载请保留出处!

相关推荐

发表评论

路人甲
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)