ajax 跨域的几种方式
网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录
什么是跨域
这里简单拿百度的网址做个例子: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)
如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]
如果您想转载本博客,请注明出处
如果您对本文有意见或者建议,欢迎留言
感谢您的阅读,请关注我的后续博客