网络上跨域的文章大多一样，这里我写下，巩固下自己的知识，顺便做个记录
什么是跨域
这里简单拿百度的网址做个例子：http://www.baidu.com:80 (默认都是80端口、可省略)
http 协议
www 子域名
baidu 主域名
80 端口号
总结：协议、子域名、主域名、端口，其中一个不一致的都称为跨域
jsonp 跨域
在网页中，我们会使用一些cdn图片、cdn资源，他们和我们的页面都不在一个域内，但是他们却可以使用，聪明的程序员使用src 可引入外部资源，实现了跨域的需求。
在页面中定义js函数，通过script 标签的src引入要请求的接口(这就是jsonp的原理)，接口中调用js函数，传入json 数据。我这里写了一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>jsonp 跨域</title>
</head>
<body>
<div id="ajax-wrap">通过ajax请求来改变这里的内容</div>
<script type="text/javascript">
// 定义jsonp 函数
function jsonp(json){
setTimeout(function(){
var box = document.getElementById('ajax-wrap');
box.innerHTML = json.code;
},3000);
}
// 添加script 标签
function appendScript(url){
var script = document.createElement('script');
script.setAttribute('src',url);
document.body.appendChild(s
cript);
}
appendScript('http://test2.com');
</script>
</body>
</html>
// 服务器端代码
<?php
echo 'jsonp({
"code": "CA1998",
"price": 1780,
"tickets": 5
})';
?>
jQuery jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="ajax-wrap">通过ajax请求来改变这里的内容</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// 定义jsonp 函数
function jsonpp(json){
var box = document.getElementById('ajax-wrap');
box.innerHTML = json.code;
}
jQuery(document).ready(function(){
$.ajax({
type: "get",
url: "http://test2.com",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
// jsonpCallback:"jsonpp",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据,如果这里有写的话，success 可以不用处理
success: function(json){
// console.log(json);
jsonpp(json);
},
error: function(xhr){
console.log(xhr);
}
});
});
</script>
</body>
</html>
有些时候，我们在拿到一些公共接口，使用jsonp方式调用接口时、无法使用，应该是接口没有做jsonp的处理
3，CORS 跨域
CORS 是一个W3C标准，全称跨域资源共享(Cross-origin resource sharing)。最初，是在1995年、由网景公司首先加入浏览器的，主要用于互联网跨域访问的安全。跨域资源共享需要浏览器和服务器同时支持，貌似跟ajax没有什么关系。
当我们的ajax请求是跨域请求时，会在请求头信息中，添加一个origin 字段，告诉服务器这个请求来自哪个源。服务器接收到这个字段后，决定是否同意这次请求
// 指定允许其他域名访问 (这个最重要，参数为* 表示任何域名都可以访问，一版设置为请求头信息中的 origin字段)
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型 ()
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
这里我只写一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="ajax-wrap">通过ajax请求来改变这里的内容</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
url: "http://test2.com?name=xiami",
dataType: "json",
success: function(json){
console.log(json);
},
error: function(xhr){
console.log(xhr);
}
});
});
</script>
</body>
</html>
// php 代码
<?php
// 指定允许其他域名访问
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
echo '{
"code": "CA1998",
"price": ' .$name.',
"tickets": 5
}';
cors兼容 IE10及以上版本， 更多细节，通过下面的参考网址，进行详细查看
参考网址
说说JSON和JSONP，也许你会豁然开朗
XHR2 了解
浏览器同源策略及规避方法
跨域资源共享 CORS 详解
HTTP访问控制(CORS)