JSONP原理及应用实例

news2024/12/23 23:05:10

JSONP是什么

JSONP(JSON with Padding)是一种跨域数据请求技术,它允许网页在不受同源策略限制的情况下从其他域中请求数据。JSONP的原理是利用 <script> 标签的跨域特性,通过 <script> 标签,指向包含 JSON 数据的远程地址,并在请求的 URL 中传递一个回调函数名,服务端接收到请求后,将数据包装在该回调函数中,返回给客户端,客户端通过回调函数接收并处理返回的数据。由于script 标签的 src 属性,只能使用 get 请求。

举个例子如下:

<!-- www.a.com -->
<script>
    function cbData(data) {
        console.log("data", data);
    }
</script>
<script src="http://www.b.com/api/jsonp?callback=cbData"></script>
 
// 请求返回的大致内容如下
cbData(参数);

a网页注册了个cbData的函数,在script跨域请求b网的接口增加一个callback参数,值为cbData,请求后,b生成一个函数调用的形式,函数名是callback的值cbData,再将数据以入参的方式给到cbData函数,这样生成了一个js语法的文档返回给a,a拿到后解析运行,相当于执行之前已经定义好的函数 cbData,参数就是传来的数据。

express 实例

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/jsonp', (req, res, next) => {
    const callback = req.query.callback
    const data = JSON.stringify( { name: 'jiawei', age: 18 } )
    res.send(`${callback}(${data});`)
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

新建一个html页面如下,在浏览器中访问。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
</head>
<body>
    <script>
        function cbData(data){
            console.log("data", data);
        }
    </script>
    <script src="http://localhost:3000/api/jsonp?callback=cbData"></script>
</body>
</html>

也可以通过js来创建script。

<!DOCTYPE html>
<html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>JSONP</title>
    </head>
    <body>
    <script>
        function cbData(data) {
            console.log("data", data);
        }
        var script = document.createElement("script")
        script.src = "http://localhost:3000/api/jsonp?callback=cbData"
        document.body.appendChild(script)
    </script>
    </body>
</html>

express 也提供了一个 req.jsonp() ,将 get 修改如下。

app.get('/api/jsonp', (req, res, next) => {
    res.jsonp({ name: 'jiawei', age: 18 })
})

默认情况下,JSONP回调名为callback。可以设置 "jsonp callback name" 覆盖此值。

app.set('jsonp callback name', 'cb')
app.get('/api/jsonp', (req, res, next) => {
    res.jsonp({ name: 'jiawei', age: 18 })
})

再修改请求链接,运行。

http://localhost:3000/api/jsonp?callback=cbData
// 修改(将callback改为cb)
http://localhost:3000/api/jsonp?cb=cbData

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1695845.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过继承React.Component创建React组件-5

在React中&#xff0c;V16版本之前有三种方式创建组件&#xff08;createClass() 被删除了)&#xff0c;之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同&#xff0c;但还是有一些区别&#xff0c;这两种方法在体如下&#xff1a; 本节先了解下用extnds Reac…

vue+elemntui 加减表单框功能样式

<el-form ref"form" :model"form" :rules"rules" label-width"80px"><el-form-item label"配置时间" prop"currentAllocationDate"><div v-for"(item,key) in timeList"><el-date…

ROCm上来自Transformers的双向编码器表示(BERT)

14.8. 来自Transformers的双向编码器表示&#xff08;BERT&#xff09; — 动手学深度学习 2.0.0 documentation (d2l.ai) 代码 import torch from torch import nn from d2l import torch as d2l#save def get_tokens_and_segments(tokens_a, tokens_bNone):""&qu…

Cortex-M3的SysTick 定时器

目录 概述 1 SysTick 定时器 1.1 SysTick 定时器功能介绍 1.2 SysTick 定时器功能实现 1.3 SysTick在系统中的作用 2 SysTick应用的实例 2.1 建立异常服务例程 2.2 使能异常 2.3 闹钟功能 2.4 重定位向量表 2.5 消灭二次触发 3 SysTick在FreeRTOS中的应用 3.1 STM…

(完全解决)Python字典dict如何由键key索引转化为点.dot索引

文章目录 背景解决方案基础版升级版 背景 For example, instead of writing mydict[‘val’], I’d like to write mydict.val. 解决方案 基础版 I’ve always kept this around in a util file. You can use it as a mixin on your own classes too. class dotdict(dict)…

如何进行异地多地兼容组网设置?

跨地区工作、远程办公和异地合作已成为常态。由于网络限制和安全性要求&#xff0c;远程连接仍然是一个具有挑战性的问题。为了解决这一难题&#xff0c;各行各业都在寻找一种能在异地多地兼容的组网设置方案。本文将着重介绍基于【天联】的组网解决方案&#xff0c;探讨其操作…

SpringBoot——整合Thymeleaf模板

目录 模板引擎 新建一个SpringBoot项目 pom.xml application.properties Book BookController bookList.html ​编辑 项目总结 模板引擎 模板引擎是为了用户界面与业务数据分离而产生的&#xff0c;可以生成特定格式的页面在Java中&#xff0c;主要的模板引擎有JSP&…

如何评价刘强东说“业绩不好的人不是我兄弟”

在近日的一次京东管理层会议上&#xff0c;创始人刘强东以不容置疑的口吻表明了对公司文化的坚定态度&#xff1a;“凡是长期业绩不好&#xff0c;从来不拼搏的人&#xff0c;不是我的兄弟。”这句话不仅是对那些工作表现不佳的员工的直接警告&#xff0c;也透露出京东在追求业…

C++语法|多重继承详解(一)|理解虚基类和虚继承

系列汇总讲解&#xff0c;请移步&#xff1a; C语法&#xff5c;虚函数与多态详细讲解系列&#xff08;包含多重继承内容&#xff09; 虚基类是多重继承知识上的铺垫。 首先我们需要明确抽象类和虚基类的区别&#xff1a; 抽象类&#xff1a;有纯虚函数的类 虚基类是什么呢&a…

阿里云的域名购买和备案(一)

前言 本篇文章主要讲阿里云的域名购买和备案。 大家好&#xff0c;我是小荣&#xff0c;我又开始做自己的产品迷途dev了。这里详细记录一下域名购买的流程和备案流程。视频教学 购买流程 1.阿里云官网搜索域名注册 2.搜索你想注册的域名 3.将想要注册的域名加入域名清单 4.点…

[Linux]网络原理与配置

一.NAT模式网路配置 虚拟系统的IP地址处于随机网段&#xff0c;同时在母机上会额外有一个与虚拟IP地址网段相同的IP地址&#xff0c;可以实现母机与虚拟机的通信。虚拟系统的IP地址可以通过主机实际的IP地址作为代理IP&#xff0c;与外部系统进行通信。 优点&#xff1a;不造…

2024.05.25学习记录

1、面经复习&#xff1a; JS异步进阶、vue-react-diff、vue-router模式、requestldleCallback、React Fiber 2、代码随想录刷题、动态规划 3、组件库使用storybook

【C++】牛客——JZ38 字符串的排列

✨题目链接&#xff1a; JZ38 字符串的排列 ✨题目描述 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数…

结合时间复杂度浅谈二分法的好处(将持续更新,绝对值你一个收藏)

前言 笔者虽然刷的算法题不多,但是笔者也敢说,二分法真的是一种很优越的算法,使用上限极高的那种,正因如此,笔者才想浅谈一下二分法. 封面是我很喜欢的一个游戏角色,不知道有没有老gal玩家知道! 什么是二分法? 枚举查找即顺序查找&#xff0c;实现原理是逐个比较数组 a[0:…

【C++】详解二叉搜索树

目录 树概述 二叉搜索树概述 概念 特性 元素操作 插入 删除 模拟实现 框架 查找 插入 删除 树概述 树——在计算机中是一种很常见的数据结构。 树是一种很强大的数据结构&#xff0c;数据库&#xff0c;linux操作系统管理和windows操作系统管理所有文件的结构就是…

【基础详解】快速入门入门 SQLite数据可

简介 SQLite 是一个开源的嵌入式关系数据库&#xff0c;实现了自给自足的、无服务器的、配置无需的、事务性的 SQL 数据库引擎。它是一个零配置的数据库&#xff0c;这意味着与其他数据库系统不同&#xff0c;比如 MySQL、PostgreSQL 等&#xff0c;SQLite 不需要在系统中设置…

golang中的字节序 binary BigEndian 大端 , LittleEndian 小端 理解与write写入注意事项

在golang的binary包中有2个字节系的变量定义BigEndian和LittleEndian 这个东西是go里面很有特点的玩意&#xff0c;我们在java, php等语言中是基本看不到&#xff0c;因为大部分的语言默认使用的是BigEndian 大端模式&#xff0c; 而go语言里面是你自己可选的。 这个字节系大小…

Java的类和对象

Java的类和对象 前言一、面向过程和面向对象初步认识C语言Java 二、类和类的实例化基本语法示例注意事项 类的实例化 三、类的成员字段/属性/成员变量注意事项默认值规则字段就地初始化 方法static 关键字修饰属性代码内存解析 修饰方法注意事项静态方法和实例无关, 而是和类相…

@Async详解,为什么生产环境不推荐直接使用@Async?

一、Async 注解介绍&#xff1a; Async 注解用于声明一个方法是异步的。当在方法上加上这个注解时&#xff0c;Spring 将会在一个新的线程中执行该方法&#xff0c;而不会阻塞原始线程。这对于需要进行一些异步操作的场景非常有用&#xff0c;比如在后台执行一些耗时的任务而不…

ssms用户登陆失败,服务器处于单用户模式。目前只有一位管理员能够连接。解决方案

文章目录 问题解决方案单用户模式什么是单用户模式&#xff1f;为什么使用单用户模式&#xff1f;实现步骤 问题 连接smss的时候发现无法连接&#xff0c;显示 服务器处于单用户模式。目前只有一位管理员能够连接 解决方案 打开SQL Server配置管理器 右键属性 在启动参数的最…