解决跨域的方式jsonp和cors

最新推荐文章于 2021-05-01 23:33:36 发布

原创最新推荐文章于 2021-05-01 23:33:36 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

jQurey

3 篇文章

订阅专栏

本文详细介绍了JSONP的工作原理，包括其利用script标签的src属性进行跨域请求的特点，以及只支持GET方法的原因。同时指出，尽管jQuery封装的jsonp在形式上与ajax相似，但实际上两者并无直接联系，因为JSONP是通过script标签实现，而非XmlHttpRequest。最后，提到了使用JSONP时，后台需要配合提供特定的数据格式，例如PHP的实现方式。

参考🔗：https://www.cnblogs.com/hjptopshow/p/7724382.html

JSONP方式

原理：
1.由于XMLHttpRequest不支持不同源地址之间发送异步请求，
2.借助script标签可以发送不同源地址之间请求的特性，去完成的跨域请求（利用script标签的src属性实现跨域请求）；
3.通过将前端函数名作为参数传递到服务器端，然后由服务器端注入数据之后再返回，实现服务器端向客户端通信。
4.由于jsonp跨域请求的底层实现是使用script标签的src属性实现的，因此jsonp只支持get方法；jQuery中封装的jsonp即使type设置为post，在jsonp时也会自动转换为get请求方式，如下图：
在这里插入图片描述

<script>
		function foo(){
			console.log('hello jsonp!')
		}

		$.ajax({
			url:'http://localhost:3000/getscript',
			type:'post',//即使type设置为post，在jsonp时也会自动转换为get请求方式
			data:{id:1,name:'zs',age:20},
			dataType:'jsonp',//发送的是jsonp请求
			jsonp:'callback',//服务端获取回调函数名称的键值
			jsonpCallback:'foo',//声明本地回调函数的名称；若不设置，jquery 默认随机生成一个函数名称
			success:function(res){
				console.log(res)
			}
		})
	</script>

5.原生方式封装的JSONP,jQuery封装的jsonp

jQuery封装的jsonp

$.ajax({
	url:'',
	dataType:'JSONP',//只需要把ajax里面的dataType设置为jsonp就可以了
	success:function(res){
		console.log(res)
	}
})

6.JSONP和ajax没有任何关系；

由于实现的原理不同，由 JSONP 实现的跨域调用不是通过 XmlHttpRequset 对象，而是通过 script 标签，所以在实现原理上，JSONP 和 Ajax 已经一点关系都没有了。jQuery封装的jsonp和ajax看上去形式相似只是由于 jQuery 对 JSONP 做了封装和转换，实际没有任何关系。

不论是否跨域，都可以使用JSONP；但是如果使用jsonp后台需要配合发送jsonp格式的数据，以php为例，代码如下：


```php
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";


### CORS (Cross-Origin Resource Share)
跨域资源共享
1.在服务端的头部添加cors头，允许跨域请求；
2.在客户端就可以正常使用ajax请求，不用把dataType设置为'jsonp'了，就正常使用ajax就可以了；