flask后端+ajax前端,解决跨域资源引起CORB问题
在 Javascript 中跨域访问是比较常见的事情,这次记录使用flask写后端API,前端ajax调用时产生的跨域问题。
问题描述:跨域资源引起CORB。
解决方案:
jsonp解决跨域问题
前端代码:
// 回掉函数,默认callback=jQuery30004159376653216822_1550582355513 function showData(data) { console.info("Get Into showData"); // json对象转成字符串 var result = JSON.stringify(data); $("#text").val(result); } // 调用 $(document).ready(function () { $("#btn").click(function () { $.ajax({ url: "http://localhost:8080/load/data", type: "GET", dataType: "jsonp", //指定服务器返回的数据类型 jsonpCallback: "showData", // 指定回调函数名称或直接使用回掉函数success jsonp: "callback", // 默认callback回调函数 success: function (data) { console.info("Get Into success"); // json对象转成字符串 // var result = JSON.stringify(data); // $("#text").val(result); } }); }); });
服务端代码:
def get_params():
result = { "code": 0, "info": "请求成功", "data": [], } if request.method == 'GET': callback = request.args.get("callback") ...... resp = "%s%s%s%s" % (callback, '(', json.dumps(result), ')') //拼接结果为callback(json.dumps(result))
return resp
方案解读:Jsonp 的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递,完成回调。上述前端代码中,创建回调函数callback,在后端代码中,获取到函数名,然后返回给前端时,需要将原返回数据与回调函数拼接为上述格式,完成回调,此时前端即可拿到返回的数据,跨域问题完美解决!