前端用用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);
    }
});
相关推荐
一城烟雨_4 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想5 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师6 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧6 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信6 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子7 小时前
CSS单位完全指南
前端·css
SunTecTec7 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪8 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程9 小时前
ES练习册
java·前端·elasticsearch
Asthenia04129 小时前
Netty编解码器详解与实战
前端