天天看点

原生jsonp请求解决跨域问题

跨域问题是因为浏览器的同源策略,而出现的一种解决跨域问题的方法;

所谓同源策略是浏览器为了安全起见,只允许客户端向同主机,同协议,同端口的服务器发送Ajax请求。如果某一个页面的来源地址与要发送请求的地址端口号主机名协议名有任意一项不相等,则阻止该请求的发送。

jsonp的思路:

浏览器不会阻止跨域引入js文件,通过script标签引入方式来发送http请求,请求地址中使用参数形式形式发送callback的参数值,这个参数值代表回调函数的函数名,后端就可以通过获取参数来得到回调函数的函数名(从而达到前后端函数名一致);后端人员将要返回的数据作为函数的实参返回给前端,前端通过回调函数的形参拿到后端返回来的数据再进行进一步处理。

代码实现:

let script = document.createElement("script");
	script.src = "跨域请求数据的http请求地址?参数1=值1&参数2=值2...";
	document.querySelectorAll("body")[0].appendChild(script);
           

其他框架或库大多都有自己封装的方法去发送jsonp请求,比如jquery库的$.ajax()方法