flask 接口 ajax 跨域,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",dataType : 'jsonp',});

第二种就是在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,});

感觉第三种方便点,第二种也不错

原文链接

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值