JSONP跨域访问API接口深入理解
发布时间：2020-12-16 19:46:51 所属栏目：百科 来源：网络整理
导读：说明 关于跨域问题的解决方案多达七、八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈,?！自行 百度 或 Google ,这里不会跟你说那么多种,只说使用最多的一种 JSONP ,你要非说 JSONP 用的不是最多的,我不信哦,你信好了,哈哈,你开心就好? 关于跨
说明关于跨域问题的解决方案多达七、八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈,?！自行 关于跨域
要了解什么是
其实说白了就一句话
比如说：
那么非要访问不同域名下的资源,怎么办呢？那么问题来了！跨域 不使用跨域访问这种方式是在没有跨域访问其它域名资源URL常规做法！而访问其它域名资源URL是不可行的！ 前端代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP TEST</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
type : 'GET',dataType : 'JSON',url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",success : function (data){
console.log(data);
}
});
</script>
</body>
</html>
浏览器开发者工具控制台提示可以发现控制台并没有输出任何返回数据,因为它也没有数据可输出,而是给出了下面这样一个提示信息：
浏览器开发者工具网络请求列表详情而在网络请求列表可以看到请求资源URL没有返回任何数据
后端返回数据形式既然通过
使用JSONP跨域访问资源前端或客户端处理从上面可以看到通过浏览器直接访问资源URL也就是API接口是可以获取到数据的,而通过返回数据形式为 dataType : 'JSONP' 注意
这里也只是限于把上面所说的「直接通过浏览器访问资源API接口URL获取到的数据」通过JSONP的形式给获取到了而已也只是仅仅如此,下面再次刷新页面通过
浏览器开发者工具控制台提示在控制台下已经看不到
浏览器开发者工具网络请求列表详情那既然在
从
http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list&callback=jQuery21408945840059161158_1519958486174&_=1519958486175 这里你就会发现这个请求资源地址与 callback=jQuery21408945840059161158_1519958486174&_=1519958486175 是这样的,在使用 $.ajax({
type : 'GET',dataType : 'JSONP',success : function (data){
console.log(data);
}
});
它就会在发起请求资源时在 AJAX参数对象字面量
|