Ajax與Flask傳值的跨域問題

bay1發表於2018-06-22
Flask跨域

title: Ajax與Flask傳值的跨域問題 date: 2018-01-31 16:41:43 tags: [開發,flask,ajax]

前後端分離時,關於前端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("現在不迎新哦~");
			},
		});
複製程式碼

感覺第三種方便點,第二種也不錯

相關文章