Ajax與Flask傳值的跨域問題

先後端分離時,關於前端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("如今不迎新哦~");
            },
        });

感受第三種方便點,第二種也不錯
原文連接