jsonp和CORS解决跨域问题

jsonp和CORS解决跨域问题
出现此问题代表跨域了。目前最常用的2中解决跨域问题的方法:
1、jsonp通过src属性实现(前端操作)
2、cors(后端操作)

1、jsonp方案

原理

1、前端设置一个函数(用来接收数据),通过src请求接口时,用callback将函数名传递过去
2、后端通过express中jsonp的方法调用函数,将数据传给前端

前端操作原理:(src属性)

//1、设置一个函数来接收数据
function aa(res){console.log(res)}	//res拿到结果

//2、通过src属性请求接口,通过callback将函数名传给后端
<script src='接口地址?callback=aa' ></script>

后端操作原理:(express中封装的jsonp方法)
jsonp和CORS解决跨域问题

jsonp 实际操作

jquery中提供了解决跨域的方法:
1、$.ajax()

在$.ajax中添加dataType:"jsonp"即可解决跨域

2、$.getJSON()

接口地址后通过callback即可
$.getJSON('接口地址?callback=?',	//url后添加?call=?即可
	data,
	function(res){
		console.log(res);
	})

2、CORS方案

只需要后端设置响应头即可解决跨域

res.set({
'Access-Control-Allow-Origin':'*'	//*代表所有浏览器都可请求
})
上一篇:记一次ssl证书配置错误引起的“cors”报错


下一篇:2020-12-10