四时宝库

程序员的知识宝库

AJAX跨域解决方法(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})

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接