想要了解跨域，首先需要模拟出跨域的环境.
跨域?: 协议,端口号,子域名,主域名只要其中有一个不一样的.比如a.com和b.com互相调用,这就会发生跨域问题,
根本原因:同源策略(出于安全考虑)
跨域环境准备:
非常简单的跨域环境:
比如:http://localhost:80/
和 http://127.0.0.1:80/
localhost:80和127.0.0.1:80看上去是同一个,但是域名不同,也算是跨域的,可以根据这个简单地了解跨域
比较复杂点的跨域环境准备:
wampserver下创建多站点.我使用HBuilder配置php编写环境(这个只需要在创建好的站点下分别创建web项目,然后指定外置web服务器到你的站点下就可以--有点简单粗暴,).
wampserver不太好弄,安装的过程容易遇到各种问题.推荐慕课网的php入门基础中老师详细介绍的wampserver环境配置(目前发现的讲得条理清晰详细的一个教程),耐心一步步跟着做,可能因为版本不同也会出现一些小问题,但是都能百度各种大海捞针解决的.
1.比较简单地跨域 xhr2(html5新推出的)
当前html访问路径: http://test01.com/test01_php/index.html
想要访问的:demo.php访问路径:http://test02.com/php/demo.php
可以看到,这两个文件并不是同源的,就会产生跨域问题
index.html
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>跨域测试</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$.ajax({ /**/
url: 'http://test02.com/php/demo.php',
type: 'GET',
success: function(data) {
$(text).html(data);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="获取跨域数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
demo.php(php中没有写什么,只返回了一个"hello")
<?php
header("Content-Type:application/txt;charset=utf-8");
/*header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");*/
echo "hello";
?>
点击获取跨域信息 :
控制台报错,没有权限访问(当然,什么都没有返回,):
把demo,php中的注释去掉
demo.php
<?php
header("content-type:application/json");
$jsonp = $_GET['callback'];
$json_data ='{"name":"网站","age":4}';
echo $jsonp."(".$json_data.")";
?>点击获取跨域数据:
可以看到能够实现
http://test01.com/test01_php/index.html
和 http://test01.com/php/demo.php 不同域之间地访问了.
关键的地方:
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
不过这个还允许通配符* :允许所有不同域的请求并访问demo.php,(你家什么人都能进,权限容易出现滥用,那得多危险,);
2.还有一种方法是后端做一个代理,前台不需要处理.(目前没接触)
3.JSONP(getjson下)
demo3.html(訪問路徑 : http://test01.com/test01_php/demo3.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="divCustomers">
</div>
<button id="btn">确定</button>
<script>
$(function() {
$("#btn").on("click", function() {
$.getJSON("http://test02.com/php/demo2.php?callback=?", function(data) {
var html = "";
for (x in data) {
html += x+":"+data[x]+"<br>";
}
$('#divCustomers').html(html);
});
})
})
</script>
</body>
</html>
demo2.php(访问路径: http://test02.com/php/demo2.php)
<?php
header("content-type:application/json");
$jsonp = $_GET['callback'];
$json_data ='{"name":"网站","age":4}';
echo $jsonp."(".$json_data.")";
?>
可以看到能够正确地渲染出不同域下返回的数据
JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来处理返回的数据.
json格式：
{"name":"网站","age":4}
jsonp格式：
callback({"name":"网站","age":4})/*callback就是传递过去的参数,这里把它当作函数使用*/
JSONP(ajax下)
demo.html(访问路径:http://test01.com/test01_php/demo.html)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
$.ajax({
type: "GET",
url: "http://test02.com/php/demo3.php?callback=?",
async: true,
dataType: 'jsonp',
success: function(data) {
$("span").html(data.name);
}
});
})
})
</script>
</head>
<body>
<button>确定</button>
<span></span>
</body>
</html>
demo3.php(访问路径:http://test02.com/php/demo3.php)
<?php
header("content-type:application/json");
$jsonp = $_GET['callback'];
$json_data ='{"name":"汪星人","age":50}';
echo $jsonp."(".$json_data.")";
?>如下图:
查看访问状态:
还有一些跨域的方法,后面遇到在写,理解跨域,处理跨域并不难.学习跨域最佳的方法:动手实践!!动手实践!!