JSONP解决js跨域请求的问题

时间:2022-11-21 21:43:56

使用js跨域请求时,会遇到No 'Access-Control-Allow-Origin' header is present on the requested resource.,跨域请求报错,以下是解决方法:

以请求京东商品价格接口为例:

<!DOCTYPE html>
<html>
<head>
<title>京东获取单个商品价格接口</title>
<script type="text/javascript" src="jquery_172.js"></script>
</head>
<body>
<form action="" method="post" onsubmit="checkForm(this);return false;">
<table>
<tr>
<td>商品id</td>
<td><input name="id" type="text" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="查询" /></td>
</tr>
</table>
</form>
<script type="text/javascript">

function checkForm (f) {
var id = f.id.value;
if(!isNaN(id)){
var url = 'http://p.3.cn/prices/mgets?skuIds=J_'+id+'&type=1';

// No 'Access-Control-Allow-Origin' header is present on the requested resource.
// 跨域问题,不可用
// $.get(url,function(data){
// console.log(data);
// });

// 使用ajax,jsonp的方式,可以解决跨域的问题
$.ajax({
url: url,
type: 'GET',
dataType: 'JSONP',
success: function (data) {
console.log(data);
}
});
}
}

</script>
</body>
</html>
改用ajax方式,类型为jsonp即可。