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,在后端代码中,获取到函数名,然后返回给前端时,需要将原返回数据与回调函数拼接为上述格式,完成回调,此时前端即可拿到返回的数据,跨域问题完美解决!

 

posted @ 2020-04-13 11:32  RIP_KOBE  阅读(592)  评论(0编辑  收藏  举报