JavaScript jsonp解决跨域问题

产生跨域原因[浏览器同源策略]：协议不同（http/https）、域名不同、端口不同

演示下出现跨域的情况，请求豆瓣api：http://api.douban.com/v2/movie/top250

jquery-ajax请求

function req_test () {
	var url = "http://api.douban.com/v2/movie/top250"

	$.ajax({
		type: "GET",
		url: url,
		success: function (res) {
			console.log(res)
		}
	});
}
req_test()

控制台直接报错...

谷歌翻译：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。

解决跨域的方法很多，其中包括CORS(Cross-Origin-Resource-Sharing)，jsonp

使用CORS解决跨域问题，直接让后台人员设置就好，前端照常请求。参考博客:跨域资源共享 CORS 详解

下面列举jsonp的两种实现方式（js / jquery ajax）

1.通过<script>请求，浏览器对<script>没有同源限制

function jsonpProcess (data) {
	console.log(data)
}

function jsonp_Script () {
	var _script = document.createElement("script");
	_script.type = "text/javascript";
	_script.src = "http://api.douban.com/v2/movie/top250?start=25&count=30&callback=jsonpProcess";
	document.head.appendChild(_script)
}

jsonp_Script();

成功请求，注意src中还附加了请求参数，这是个GET请求，jsonp也仅仅支持GET请求。数据在自定义函数jsonpProcess中返回，注意使用callback=jsonpProcess调用

2.通过jquery ajax请求，jquery ajax进行jsonp请求需要额外设置两个属性：dataType，jsonpCallback

function jsonp_jquery () {
	var url = "http://api.douban.com/v2/movie/top250"
	var data = JSON.stringify({
		"start": 25,
		"count": 30
	})

	$.ajax({
		type: "GET",
		url: url,
		data: data,
		dataType: "jsonp",
		jsonpCallback: "jsonpProcess", // jsonpProcess自定义函数名
		success: function (res) {
			console.log(res)
		}
	});
}

jsonp_jquery();

注意：jsonpCallback属性的值为自定义函数jsonpProcess

3.vue-resource解决跨域问题

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript">
	Vue.http.jsonp("http://api.douban.com/v2/movie/top250", {
		params: {
			start: 20, 
			count: 30
		}
	}).then(response => {
		console.log(response)
	}, response => {
		console.log(response)
	});
</script>

JavaScript jsonp解决跨域问题

猜你喜欢