前端用用jsonp的方式解决跨域问题

前端用用jsonp的方式解决跨域问题

前端用用jsonp的方式解决跨域问题

    • 前端用用jsonp的方式解决跨域问题
      • 限制与缺点:
      • 前端
      • 后端
      • 测试使用示例

限制与缺点:

不安全、只能使用get方式、后台需要相应jsonp方式的传参

前端

function jsonp(obj) {// 动态生成唯一的函数名var fnName = 'jsonp_' + Math.random().toString().replace('.', '');// 创建一个script标签var script = document.createElement('script');// 定义全局函数window[fnName] = function (res) {try {obj.success(res);} finally {// 移除 script 标签document.head.removeChild(script);// 删除全局函数delete window[fnName];}};// 构建请求参数var params = {callback: fnName,invoiceno: obj.data.invoiceno,pk_subjcode: obj.data.pk_subjcode,pk_org: obj.data.pk_org,begindate: obj.data.begindate,enddate: obj.data.enddate,billno: obj.data.billno,pk_supplier: obj.data.pk_supplier};// 将参数对象转换为查询字符串var queryString = Object.keys(params).map(function (key) {return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);}).join('&');// 改变 src,添加到 head 中script.src = obj.url + '?' + queryString;// 处理错误情况script.onerror = function () {// 移除 script 标签document.head.removeChild(script);// 删除全局函数delete window[fnName];if (obj.error) {obj.error(new Error('JSONP 请求失败'));}};// 把 script 标签添加到 head 标签中,就会发送 src 的请求了document.head.appendChild(script);
}

后端

@GetMapping("/getGylPrepayData")public String getGylPrepayData(@RequestParam(value = "callback", defaultValue = "callback") String callback,@RequestParam(value = "pk_group") String pk_group,@RequestParam(value = "pk_org") String pk_org,@RequestParam(value = "begindate") String begindate,@RequestParam(value = "enddate") String enddate,@RequestParam(value = "billno") String billno,@RequestParam(value = "pk_supplier") String pk_supplier) {Map<String, Object> requestBody=new HashMap<>();requestBody.put("pk_group", pk_group);requestBody.put("pk_org", pk_org);requestBody.put("begindate", begindate);requestBody.put("enddate", enddate);requestBody.put("billno", billno);requestBody.put("pk_supplier", pk_supplier);log.info("getGylPrepayData receive request:{}", requestBody);JSONObject response = seaNccGylDataService.getGylPrepayData(requestBody);log.info("getGylPrepayData return response status:{}", response.getString("status"));return callback + "(" + response + ")";}

测试使用示例

// 测试使用使用示例
jsonp({url: 'ip/api/workflow/seanccgyl/testGet',data: {invoiceno: '123',pk_subjcode: '456',pk_org: '789',begindate: '2024-01-01',enddate: '2024-12-31',billno: 'ABC',pk_supplier: 'DEF'},success: function (res) {console.log(res);},error: function (err) {console.error(err);}
});

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

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

相关文章

MySQL详解最新的官方备份方式Clone Plugin

一、Clone Plugin的动态安装 install plugin clone soname mysql_clone.so;select plugin_name,plugin_status from information_schema.plugins where plugin_name clone; 二、Clone Plugin配置持久化 在 MySQL 配置文件my.cnf中添加以下内容&#xff0c;确保插件在 MySQL …

解决python manage.py shell ModuleNotFoundError: No module named xxx

报错如下&#xff1a; python manage.py shellTraceback (most recent call last):File "/Users/z/Documents/project/c/manage.py", line 10, in <module>execute_from_command_line(sys.argv)File "/Users/z/.virtualenvs/c/lib/python3.12/site-packa…

鸿蒙NEXT开发资源工具类(ArkTs)

import { AppUtil } from ./AppUtil; import { StrUtil } from ./StrUtil; import { resourceManager } from kit.LocalizationKit;/*** 资源工具类。* 提供访问应用资源的能力&#xff0c;包括布尔值、数字、字符串等资源的获取。** author 鸿蒙布道师* since 2025/04/08*/ ex…

css使用mix-blend-mode的值difference实现内容和父节点反色

1. 使用场景 往往开发过程中&#xff0c;经常遇到产品说你这个背景图和文字颜色太接近了&#xff0c;能不能适配下背景图&#xff0c;让用户能够看清具体内容是啥。 这么说吧&#xff0c;这种需求场景非常合理&#xff0c;因为你做开发就是要给用户一个交代&#xff0c;给他们…

el-input 中 select 方法使用报错:属性“select”在类型“HTMLElement”上不存在

要解决该错误&#xff0c;需明确指定元素类型为 HTMLInputElement&#xff0c;因为 select() 方法属于输入元素。 步骤解释&#xff1a; 类型断言&#xff1a;使用 as HTMLInputElement 将元素类型断言为输入元素。 可选链操作符&#xff1a;保持 ?. 避免元素为 null 时出错…

Mybatis Plus与SpringBoot的集成

Mybatis Plus与SpringBoot的集成 1.引入Maven 依赖2.配置application.yml文件3.创建实体类4.分页插件5.逻辑删除功能6.忽略特定字段7.自动填充 1.引入Maven 依赖 提前创建好一个SpringBoot项目&#xff0c;然后在项目中引入MyBatis Plus依赖 <dependency><groupId&g…

大数据学习(104)-clickhouse与hdfs

&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一…

【简历全景认知2】电子化时代对简历形式的降维打击:从A4纸到ATS的生存游戏

一、当简历遇上数字洪流:传统形式的式微 在1990年代,一份排版精美的纸质简历还能让HR眼前一亮;但今天,超过75%的 Fortune 500 企业使用ATS(Applicant Tracking System)进行初筛,未优化的简历可能在5秒内就会沦为数字废土。这种变迁本质上符合「技术接纳生命周期」理论—…

esp32cam -> 服务器 | 手机 -> 服务器 直接服务器传输图片

服务器先下载python &#xff1a; 一、Python环境搭建&#xff08;CentOS/Ubuntu通用&#xff09; 一条一条执行 安装基础依赖 # CentOS sudo yum install gcc openssl-devel bzip2-devel libffi-devel zlib-devel # Ubuntu sudo apt update && sudo apt install b…

SeaTunnel系列之:Apache SeaTunnel编译和安装

Apache SeaTunnel编译 Prepare编译克隆源代码本地安装子项目从源代码构建 SeaTunnel构建子模块安装 JetBrains IDEA Scala 插件安装 JetBrains IDEA Lombok 插件代码风格运行简单示例不仅如此 安装下载 SeaTunnel 发布包下载连接器插件从源代码构建 SeaTunnel 运行 SeaTunnel 在…

JavaScript/React中,...(三个连续的点)被称为 扩展运算符(Spread Operator) 或 剩余运算符(Rest Operator)

const processOrder (order) > {const tax order.total * 0.1;const finalAmount order.total tax;return { ...order, tax, finalAmount }; }; 解释一下&#xff0c;特别&#xff1a;...?在JavaScript/React中&#xff0c;...&#xff08;三个连续的点&#xff09;被称…

FRP的proxies只是建立通道,相当于建立与服务器沟通的不同通道而不是直接将路由器与服务器云端沟通

没有更好的办法了吗&#xff0c;我看frpc.toml的里面可以设置两个proxies那我esp32的监听端口设置在frpc.toml里面它不也能跟云服务器建立联系吗&#xff0c;比如远程与本地端口都配置为5112那云服务器接收到的5112访问会以frp配置的本地端口5112转发到frp客户端的路由器&#…

#在docker中启动mysql之类的容器时,没有挂载的数据...在后期怎么把数据导出外部

如果要导出 Docker 容器内的 整个目录&#xff08;包含所有文件及子目录&#xff09;&#xff0c;可以使用以下几种方法&#xff1a; 方法 1&#xff1a;使用 docker cp 直接复制目录到宿主机 适用场景&#xff1a;容器正在运行或已停止&#xff08;但未删除&#xff09;。 命…

Java的JDK、JRE、JVM关系与作用

Java的JDK、JRE、JVM关系与作用 java中的JDK、JRE和JVM是三个核心组件&#xff0c;各自承担不同角色&#xff0c;且存在层级依赖关系 1. JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09; 是什么&#xff1a; JVM是虚拟的计算机&#xff0c;能够执行…

C++学习之套接字并发服务器

目录 1.昨天套接字服务器的弊端 2.如何通过多进程方式实现服务器并发 3.多进程服务器-1 4.多进程服务器-2 5.多进程版程序-回收子进程被信号中断的处理 6.多线程版TCP服务处理思路 7.多线程并发服务器编写 8.为什么不能把文件描述符地址传到子线程中 9.多线程程序测试 …

机器学习新范式:Kubernetes + Kubeflow,解锁模型训练与部署的高效密码

一、Kubernetes在机器学习模型训练与部署中的作用 Kubernetes作为一个强大的容器编排平台&#xff0c;为机器学习模型的训练与部署提供了以下核心支持&#xff1a; 分布式训练支持&#xff1a;Kubernetes能够自动化部署和管理PyTorch等机器学习框架的分布式训练任务。通过利用…

动态科技感html导航网站源码

源码介绍 动态科技感html导航网站源码&#xff0c;这个设计完美呈现了科幻电影中的未来科技界面效果&#xff0c;适合展示技术类项目或作为个人作品集的入口页面&#xff0c;自适应手机。 修改卡片中的链接指向你实际的HTML文件可以根据需要调整卡片内容、图标和颜色要添加更…

数字内容智能推荐优化策略

个性化推荐算法构建路径 构建高效数字内容体验的推荐系统&#xff0c;需以多源数据融合为基础框架。首先通过用户画像建模整合人口属性、行为轨迹及兴趣标签&#xff0c;结合协同过滤与深度学习算法建立内容关联矩阵。在此基础上&#xff0c;引入上下文感知机制&#xff0c;动…

# 深度学习中的优化算法详解

深度学习中的优化算法详解 优化算法是深度学习的核心组成部分&#xff0c;用于最小化损失函数以更新神经网络的参数。本文将详细介绍深度学习中常用的优化算法&#xff0c;包括其概念、数学公式、代码示例、实际案例以及图解&#xff0c;帮助读者全面理解优化算法的原理与应用…

汽车的四大工艺

文章目录 冲压工艺核心流程关键技术 焊接工艺核心流程 涂装工艺核心流程 总装工艺核心流程终检与测试静态检查动态检查四轮定位制动转鼓测试淋雨测试总结 简单总结下汽车的四大工艺&#xff08;从网上找了一张图&#xff0c;感觉挺全面的&#xff09;。 冲压工艺 将金属板材通过…