前端用用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);
    }
});
相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴5 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante7 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript