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