Hi,欢迎来到华清远见移动互联网学院官网!国内王牌Android培训、JavaEE培训、HTML5培训、UI培训、JAVA培训、VR培训机构!

  • 400-706-1880
  • 新浪微博
  • 微信
您当前的位置:移动互联网学院 > 前端开发 > Ajax > Ajax开发中跨域问题的解决方法

Ajax开发中跨域问题的解决方法

时间:2017-04-18 15:42 来源:ajax开发小赢家

跨域,简单地理解就是因为浏览器基于安全的同源策略限制不同域名和协议之间的互相访问。而AJAX的跨域请求,其实浏览器并没有限制不同域的网络请求,只是浏览器会基于请求返回响应头做处理,如果发现是跨域请求且响应头Access-Control-Allow-Origin未对请求来源设置允许,则根据非同源禁止策略,浏览器不会将服务端返回的数据交给AJAX,这样就会阻止不同域之间的数据交互。

目前主要有两种比较主流的解决方案:

1)服务端对访问的来源设置Access-Control-Allow-Origin响应头许可;

此方法不需要javascript做任何改动,只需要服务端层面做处理,相对来说简单易用。
<?php
header("Access-Control-Allow-Origin:*"); //允许所有域名的跨域请求
header("Access-Control-Allow-Origin:http://www.a.com"); //仅允许www.a.com来源的跨域请求,可以动态地通过$_SERVER['HTTP_ORIGIN']请求来源域,进行多个域的跨域请求许可。

2)JSONP

jsonp的实现原理,其实就是通过动态加载script标签,预先定义好callback函数处理逻辑,服务端返回的数据其实是一个执行函数的代码,将有效数据作为callback函数的参数。

此方法需要前端和服务端同时做支持,实现成本也比较低廉。
<head>
</head>
<script>
var func_name = "call_func"; //回调函数名
window[func_name] = function(data){
//预先注册回调函数处理逻辑
};
var script = document.createElement('script');
script.src="http://www.a.com/test.php?callback=" + func_name;
var head = document.head || document.getElementByTagName('head')[0];
head.appendChild(script);
</script>
<?php
$callback = $_GET['callback'];
$data = array("status" => 1);
echo $callback . '(' . json_encode($data) . ')'; //等价与 call_func({status:1})

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
最新开班
  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    13332931043

    广州市天河区中山大道268号天河广场3层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    186-2758-2830

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright 2004-2017 华清远见教育集团 版权所有,沪ICP备10038863号-3,京公海网安备110108001117号