JSONP 实现跨域请求案例

news/2024/7/19 12:29:33 标签: express, JSONP, CORS, 跨域, 全栈

express__1">后端使用 express 搭建,案例代码如下:

const express = require('express')

const app = express()
const PORT = 3000

app.get('/data', (req, res) => {
    const jsonData = {
        name: 'Alan',
        age: 666,
        city: 'GD'
    }
    const callback = req.query.callback // 获取前端中的回调函数名称
    if (callback) {
        res.send(`${callback}(${JSON.stringify(jsonData)})`)
    } else {
        res.status(400).send('Callback function name is required')
    }
})

app.listen(PORT, () => { console.log(`listen http://localhost:${PORT}`) })

JSONP__28">前端发起 JSONP 请求,实现跨域数据请求

<body>
    <pre></pre>
    <script>
        // 定义一个回调函数来处理 JSONP 响应
        function handleJsonpData(data) {
            // 输出 JSONP 数据
            document.querySelector('pre').innerText = JSON.stringify(data, null, 4)
        }

        // 创建一个 script 标签,设置 src 属性为 JSONP 请求的 URL,并指定回调函数名
        const script = document.createElement('script')
        script.src = 'http://localhost:3000/data?callback=handleJsonpData'

        // 将 script 标签添加到文档中,触发 JSONP 请求,
        // 然后服务器放回的字符串会被当成 js 命令执行,从而调用我们前面定义的函数
        // 这样就可以获取到服务器的数据了
        document.body.appendChild(script)
    </script>
</body>

</html>

效果

在这里插入图片描述
在这里插入图片描述


http://www.niftyadmin.cn/n/5440156.html

相关文章

5.1.6.2.1、【AI技术新纪元:Spring AI解码】双子座函数调用

双子座函数调用 双子座函数调用允许开发者在代码中创建一个函数的描述,然后将该描述传递给语言模型。模型的响应包括匹配该描述的函数名称和调用它的参数。 开发者可以向 VertexAiGeminiChatClient 注册自定义 Java 函数,并让 Gemini Pro 模型智能地输出一个包含调用一个或…

成为嵌入式工程师以后才明白的道理

岁月是把杀猪刀&#xff0c;有时看着最近拍的照片&#xff0c;MD&#xff0c;像个糟老头。 有时候一直以为自己心理年龄才20多岁&#xff0c;实际却马上要奔4了。 每天看着工业园区那些熙熙攘攘的00后&#xff0c;感叹年轻真好&#xff0c;感叹属于我们的时代&#xff0c;快要过…

SD-WAN技术助力跨境电商网络搭建的解决方案

随着全球贸易的蓬勃发展&#xff0c;跨境电商成为了商业领域中的一个重要组成部分。然而&#xff0c;跨境电商面临着网络搭建和管理的复杂性&#xff0c;而SD-WAN技术的引入为解决这些问题提供了一种创新的方法。本文将深入探讨SD-WAN如何有效解决跨境电商行业的网络搭建问题。…

Ansible 运行前三部曲 运行之前的检查 查看任务 查看IP等等

目录 前言检查错误列出所有任务列出在那些机器执行运行 前言 ansible-playbook在运行之前要对文件进行检查 查看有没有语法错误 查看 执行的任务以及脚本 检查错误 ansible-playbook nginx.yml --syntax-check列出所有任务 ansible-playbook nginx.yml --list-task列出在那…

2024最新华为OD机试试题库全 -【执行时长】- C卷

1. 🌈题目详情 1.1 ⚠️题目 为了充分发挥GPU算力,需要尽可能多的将任务交给GPU执行,现在有一个任务数组,数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。 假设GPU最多一次执行n个任务,一次执行耗时1秒,在保证GPU不空闲情况下,最少需要多长时间执行完成。…

MWC 2024|「Paraverse平行云」展示空间计算时代沉浸式交互体验

&#x1f389;当地时间2月26日&#xff0c;2024年世界移动通信大会&#xff08;MWC2024&#xff09;在巴塞罗那拉开帷幕。作为全球移动通信领域最大的技术展会之一&#xff0c;MWC被视为全球通信行业风向标。 &#x1f680;随着Vision Pro再次点燃全球空间计算技术热情&#xf…

python爬虫之xpath入门

文章目录 一、前言参考文档&#xff1a; 二、xpath语法-基础语法常用路径表达式举例说明 三、xpath语法-谓语表达式举例注意 四、xpath语法-通配符语法实例 五、选取多个路径实例 六、Xpath Helper安装使用说明例子&#xff1a; 七、python中 xpath 的使用安装xpath 的依赖包xm…

SpringCloudAlibaba系列之Seata实战

目录 环境准备 1.下载seata安装包 2.修改配置文件 3.准备seata所需配置文件 4.初始化seata所需数据库 5.运行seata 服务准备 分布式事务测试 环境准备 1.下载seata安装包 Seata-Server下载 | Apache Seata 本地环境我们选择稳定版的二进制下载。 下载之后解压到指定目录…