前端用用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);
    }
});
相关推荐
vvilkim3 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing3 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
写代码的小王吧4 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇5 小时前
CSS 渐变色
前端
snow@li5 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇6 小时前
配置 Gemini Code Assist 插件
前端
刺客-Andy6 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七6 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七6 小时前
14.Python Socket客户端开发指南
前端·python