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

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

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

限制与缺点:

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

前端

js 复制代码
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);
}

后端

java 复制代码
@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 + ")";
    }

测试使用示例

js 复制代码
// 测试使用使用示例
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);
    }
});
相关推荐
数字化顾问2 小时前
解析前端框架 Axios 的设计理念与源码:从零手写一个支持 HTTP/3 的“类 Axios”最小核
前端
二个半engineer2 小时前
微前端中iframe集成方式与使用微前端框架方式对比
前端·前端框架
小菜全2 小时前
《WebAssembly:前端开发的新可能》
前端·javascript
余防3 小时前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与3 小时前
前端2.0
前端
南风木兮丶3 小时前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少3 小时前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务3 小时前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia3 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia3 小时前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc