Ajax与Flask传值的跨域问题-白红宇

Ajax与Flask传值的跨域问题

阅读量：6496 次

发布时间：2019-06-24

本文共 3172 字，大约阅读时间需要 10 分钟。

前后端分离时,关于前端Ajax-Post数据时,遇到的一个问题

在写一个报名提交的页面,前端组写了前端页面
但是没有写后端的传值,本来想构建Flask结构目录
但是想实现API的形式,可以控制提交时间段-在不招新的时间关闭后端
就打算分离开,form表单提交的Post一开始是这样写的

$("form").submit(function(){    var flagname  = isname();    var flagphone = isphone();    var flagclass = isclass();    var flagemail = isemail();    var flaggroup = isgroup();    if(flagname == true && flagphone == true && flagclass == true         && flagemail == true && flaggroup == true){        var data={            InfoNmae:InfoName.value,            InfoPho:InfoPho.value,            InfoCls:InfoCls.value,            InfoEmail:InfoEmail.value,            InfoGroup:arr,            InfoPower:InfoPower.value        };        $.ajax({            type:'POST',            url: "/joinus",            data: JSON.stringify(data),            dataType : 'json',            success:function(res){                alert("提交成功");            },            error: function (res){                var json_data=JSON.stringify(res);                alert(json_data);                // alert("现在不迎新哦~");            },        });    }    else {        return false;    }})

后端是这样

@app.route("/joinus",methods=['POST'])def index():    data=request.get_json(force=True)    if data:        print(data)        return jsonify({"status":True})    else:        return jsonify({"status":False})

一开始想的是,直接将url改为后端运行的绝对路径不行了

但是修改之后发现,但是一直报500错误,后来才知道是跨域问题......

在网上找到了
第一种直接修改数据类型为jsonp,采用GET方法,确实可行.....

$.ajax({            type:'POST',            url: "http://127.0.0.1:5000/joinus",            data: JSON.stringify(data),            dataType : 'jsonp',            success:function(res){                alert("提交成功");            },            error: function (res){                var json_data=JSON.stringify(res);                alert(json_data);                // alert("现在不迎新哦~");            },        });

第二种就是在flask端加上响应头
但是上个链接中在用make_reponse()函数形成响应头时没有将数据json化
还是报500错误

@app.route("/api",methods=['POST'])def index():    data=request.get_json(force=True)    if data:        print(data)        res = make_response(jsonify(data))        res.headers['Access-Control-Allow-Origin'] = '*'        res.headers['Access-Control-Allow-Methods'] = 'POST'        res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'        return res    else:        return jsonify({"error":False})

第三种是应用了flask集成的轮子
直接pip install flask_cors

from flask_cors import CORS# r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求CORS(app, resources=r'/*')@app.route("/joinus",methods=['GET','POST'])def index():    data=request.get_json(force=True)    if data:        print(data)        return jsonify({"status": True})    else:        return jsonify({"status": False})

$.ajax({            type:'POST',            crossDomain: true,            url: "http://127.0.0.1:5000/joinus",            data: JSON.stringify(data),            dataType : 'json',            success:function(res){                alert("提交成功");            },            error: function (res){                var json_data=JSON.stringify(res);                alert(json_data);                // alert("现在不迎新哦~");            },        });