前端用用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);
    }
});