JSONP是个嘛玩意?解决跨域问题?
浏览器同源策略
限制js向 其他域名发起请求,浏览器调试报错如下
JSONP 是一种解决方法
浏览器不会阻止带有src属性的标签发请求。所以可以常用的 <script src="xxxxx"></script> 来发请求
但是:返回的数据(字符串)需要符合js的语法。而服务端则专门做了支持。比如就返回 functionName(arg...)
这种方案就称为JSONP
例如某电视台查询最近节目单的接口就做了支持:
http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
接口返回字符串:list({data:[xxxx......]})
这个字符串放到js里面就可以解析为可以执行的动作,并且参数包含了服务端想提供给客户端的数据,前端只要有list这个js函数就可以对获取到的数据自行处理
例:普通js 创建<scrript src='' ></script> 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-2.2.3.min.js"></script>
</head>
<body>
<h1>从后台获取结果</h1>
{{ result }}
<h1>前端js直接向其他域名发起get请求</h1>
<input type="button" value="点击发起js请求" onclick="getContent();"/>
<div id="container"></div>
</body>
<script>
function getContent(){
//////////普通js发起jsonp////////////////
// 利用js向查询天气接口发请求,接口返回的为js 的函数字符串,并且在函数中传参
// 浏览器不会阻止 带有src 属性的标签发get请求,从而实现跨域请求
let tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
document.head.appendChild(tag);
// 向浏览器增加元素后,含有src属性会立即发送get请求到目标网站
// 返回数据为符合js语法的函数:如list({data:[({data:xxx,,,,,,,)自己的js中必须提前创建好这个函数来获取数据做对应的处理
// 标签增加获取到数据后,后立即删除此标签即可
document.head.removeChild(tag);
}
// 创建支持jsonp的接口返回的函数
function list(arg) {
console.log(arg)
} </script>
</html>
点击按钮发请求,查看获取到的数据
ajax 发起跨域请求
参数说明:
dataType: 'jsonp', //数据类型
jsonp:'callback', // 表示发送请求的时候传给后端url中的查询参数名
jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值
// jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list
最后发请求的实际url地址类似:http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1596885252309
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-2.2.3.min.js"></script>
</head>
<body>
<h1>从后台获取结果</h1>
{{ result }}
<h1>前端js直接向其他域名发起get请求</h1>
<input type="button" value="点击发起js请求" onclick="getContent();"/>
<div id="container"></div>
</body>
<script>
function getContent(){ $.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
type:'POST',
dataType: 'jsonp',
jsonp:'callback', // 表示发送请求的时候传给后端url中的查询参数名
jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值
// jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list
})
}
// 创建支持jsonp的接口返回的函数
function list(arg) {
console.log(arg)
} </script>
</html>
JSONP是个嘛玩意?解决跨域问题?的更多相关文章
- 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)
众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...
- AJAX跨域问题解决方法(2)——JSONP解决跨域
JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...
- 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
- JSONP解决跨域问题,什么是JSONP(转)
原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...
- Django使用jsonp和cors解决跨域请求问题
1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...
- 手动创建script解决跨域问题(jsonp从入门到放弃)
vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...
- JSONP方法解决跨域请求
Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...
- JSONP、CORS解决跨域问题
一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,对href属性都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先 ...
- 学习AJAX必知必会(4)~同源策略、解决跨域问题(JSONP、CORS)
一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...
- 非jsonp解决跨域问题
1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import jav ...
随机推荐
- 监听器watch
<label > 姓名: <input type="text" placeholder="请输入姓名" v-model="firt ...
- ThinkPad笔记本外放没声音解决办法(不是驱动的原因)
本人的本子是T480,自从装完Ubuntu系统之后W10系统就没有外放声音了,卸载Ubuntu之后还是没有声音,重装声卡驱动.重装系统之后依然无效. 我的解决办法是升级主板Bois,具体如下: 进入官 ...
- [SQL Server]一列多行转换为字符串
在 SQL Server 中,如何将多行数据变成一个字符串保存. skill 投石 挖矿 刮痧 上面三行数据想要得到结果为:投石,挖矿,刮痧 有两种方式: 拼接字符串. 使用 for XML 首先创建 ...
- 部署vue项目到Linux服务器
案例一 vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目 首先本地有一个vue项目,启动后可正常访问 本地打包后,也可直接访问 若打包后的index. ...
- C/C++ Qt 给ListWidget增加右键菜单
在上一篇博文<C/C++ Qt ListWidget 列表框组件应用>中介绍了ListWidget组件的基本使用技巧,本次将给ListWidget组件增加一个右键菜单,当用户在ListWi ...
- Codeforces 512D - Fox And Travelling(树上背包)
题面传送门 题意: 给出一张无向图,每次你可以选择一个度数 \(\leq 1\) 的点并将其删除. 问对于 \(k=0,1,2,\dots,n\),有多少个删除 \(k\) 个点的序列,答案模 \(1 ...
- Codeforces 407E - k-d-sequence(单调栈+扫描线+线段树)
Codeforces 题面传送门 & 洛谷题面传送门 深感自己线段树学得不扎实-- 首先特判掉 \(d=0\) 的情况,显然这种情况下满足条件的区间 \([l,r]\) 中的数必须相同,双针扫 ...
- 洛谷 P5470 - [NOI2019] 序列(反悔贪心)
洛谷题面传送门 好几天没写题解了,写篇题解意思一下(大雾 考虑反悔贪心,首先我们考虑取出 \(a,b\) 序列中最大的 \(k\) 个数,但这样并不一定满足交集 \(\ge L\) 的限制,因此我们需 ...
- Identity Server 4 从入门到落地(三)—— 创建Web客户端
书接上回,我们已经搭建好了基于Identity Server 4的认证服务和管理应用(如果还没有搭建,参看本系列前两部分,相关代码可以从github下载:https://github.com/zhen ...
- 容器中的容器——利用Dind实现开箱即用的K3s
我在学习 Rancher 和 Minikube 的时候,发现它们都可以在自己的容器环境中提供一个 K3s 或 K8s 集群.尤其是 Minikube ,用户可以在它的容器环境中执行 docker ps ...