最近在项目中用到 AJAX 跨域请求,故整理了一下方法,
需要注意的是Response Headers 信息,不同的 Headers 信息有可能获取方式有所不一样,大家可以尝试一下。
经常出现的错误:
**
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. The response had HTTP status code 400.
**
可以在被请求的Response header中加入:
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
- POST跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(function () {
$.ajax({
url:'http://118.190.0.95:8686/BJZWY-SY/CGQ/zTree?cgqbh=00047',
type:'POST',
success: function(data){
var as = JSON.parse(data);
console.log(as);
}
});
});
</script>
</body>
</html>
- 通过 JSONP 方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为:' + status + ',状态是:' + xhr.statusText);
console.log(response);
}
});
});
});
</script>
</html>
- 雅虎代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(function () {
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\"https://api.douban.com/v2/book/search\"",
format: "json"
}, function (data) {
console.log(data)
// console.log(data.query.results.json.data);
// $("#content").html(data.query.results.json.data.shidu);
});
});
</script>
</body>
</html>