接口的跨域问题(JSONP)

news/2024/7/5 1:59:45

1.回顾JSONP的概念与特点

        概念:浏览器端通过<script>标签的src属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。

        特点:
       1)JSONP不属于真正的Ajax 请求,因为它没有使用XMLHttpRequest 这个对象

        2)JSONP仅支持 GET 请求,不支持 POST、PUT、DELETE 等请求

2.创建JSONP接口的注意事项

        如果项目中已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。示例代码如下:

 //优先创建JSONP接口(这个接口不会被处理成CORS接口)
app.get('/api/jsonp', (req, res) => { } )
// 再配置CORS中间件(后续的所有接口,都会被处理成CORS接口)
app.use(cors())

// 这是一个开启了 CORS 的接口
app.get('/api/get', (req, res) => { })

3.实现JSONP 接的步骤       

        1)获取客户端发送过来的回调函数的名字      

         2)得到要通过JSONP形式发送给客户端的数据

        3)根据前两步得到的数据,拼接出一个函数调用的字符串        

        4)把上一步拼接得到的字符串,响应给客户端的<script>标签进行解析执行

4.实现JSONP接口的具体代码

app.get('/api/jsonp', (req, res) => (
    // 1,获取客户端发送过来的回调函数的名字
    const funcName = req.query.callback
    // 2.得到要通过JSONP形式发送给客户端的数据
    const data = ( name: 'zs', age: 22 )
    // 3.根据前两步得到的数据,拼接出一个函数调用的字符串
    const scriptStr =`${funcName}(${JSON.stringify(data)})`
    // 4.把上一步拼接得到的字符串,响应给客户端的 <script> 标签进行解析执行
    res.send(scriptStr)
})


http://lihuaxi.xjx100.cn/news/1847259.html

相关文章

国标GB28181协议/RTSP视频监控汇聚平台EasyCVR(V.3.4)页面UI大更新

为提高用户体验&#xff0c;增强平台功能&#xff0c;旭帆科技的Easy系列平台也在不断优化更新中。在最新的EasyCVR&#xff08;V.3.4&#xff09;中&#xff0c;其最显著的区别即为首页UI的调整。 其亮点是在【配置中心】-【基础配置】-【展示信息】中&#xff0c;首页UI可分…

mvn 编译时报错 java heap space

问题描述 使用IDEA进行war打包时&#xff0c;编译类都正常&#xff0c;但是最后生成 war 包时很慢&#xff0c;有些时候还会报错&#xff1a; java head space。具体错误如图&#xff1a; 问题诊断 换电脑&#xff0c;可行清理 .idea 目录重新打包还是不行升级 maven-war-plu…

详细讲解1.js处理日期对象输出标准的“2000年12月22日 周三“ 的格式

当我们需要在网页中显示日期时&#xff0c;通常需要将日期对象转换为特定格式的字符串。在 JavaScript 中&#xff0c;可以使用 Date 对象来处理日期和时间。下面我们就来讲解如何使用 JavaScript 处理日期对象输出标准的"2000年12月22日 周三" 的格式。 基本知识点…

云服务器同时连接数突然变高是什么原因

​  云服务器同时连接数突然变高&#xff0c;导致服务器负载增加&#xff0c;响应时间变长&#xff0c;严重影响了网站的正常运营。为了解决这个问题&#xff0c;我们首先需要了解 云服务器同时连接数变高的原因。 一、网络攻击 网络攻击是导致云服务器同时连接数突然变高的一…

全国高校走进深算院:共话国产数据库产教融合生态建设

近日&#xff0c;由教育部高等学校计算机类专业教学指导委员会、全国高等学校计算机教育研究会主办&#xff0c;清华大学出版社、深圳市信息技术应用创新联盟承办的“2023全国高校走进信创企业研学活动”顺利举办。来自全国各地30余家高校的近80位院校领导、教师代表走进了深圳…

Linux CentOS7 安装Docker | 中文输入法

CentOS7安装中文输入法&#xff1a; 在安装CentOS时&#xff0c;我们为了方便使用&#xff0c;语言选择了中文&#xff0c;但是我们发现&#xff0c;在Linux命令行或者是浏览器中输入时&#xff0c;我们只能输入英文&#xff0c;无法输入汉字。 用yum 安装ibus 命令&#xff…

Linux:可视化管理工具Webmin的安装

一、下载 地址&#xff1a;Webmin官网 我这里下载的是1.700-1版本 二、安装 1、在虚拟机上新建目录并安装软件 mkdir /opt/webmin rpm -ivh webmin-1.700-1.noarch.rpm2、修改webmin的root密码 /usr/libexec/webmin/changepass.pl /etc/webmin root 1234563、修改端口(可…

float32和64的精度损失问题

最后更新于2023年11月29日 11:25:02 这个问题是纯数学/计算机科学问题&#xff0c;跟语言无关&#xff0c;见以下链接&#xff1a; GeekHelpGeek&#xff0c;讲了IEEE754是怎么保存浮点数的 知乎链接&#xff0c;讲了IEEE754但没太说明白&#xff0c;但是说了精度损失的原因&…