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