JSONP解决js跨域请求的问题

最新推荐文章于 2023-07-12 16:55:05 发布

影天

最新推荐文章于 2023-07-12 16:55:05 发布

阅读量639

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xwlyun/article/details/43982885

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用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" οnsubmit="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即可。