python flask跨域_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("现在不迎新哦~");
},
});
感觉第三种方便点,第二种也不错
原文链接
python flask跨域_Ajax与Flask传值的跨域问题相关推荐
- Python 使用CORS跨域资源共享解决flask服务器跨域问题、浏览器同源策略
CORS 全称 Cross-origin resource sharing(跨域资源共享),只要服务端配置了 CORS,前端调用时就可以实现跨域访问了. 形式就是封装在 header 里的一些参数,例 ...
- html文件怎么用Python做后端,利用python实现后端写网页(flask框架).pdf
利利用用python实实现现后后端端写写网网页页 ((flask框框架架)) 如何用python做后端写网页-flask框架 什么是Flask安装flask模块Hello World更深一步:数据绑 ...
- flask html下拉列表,如何使用Flask和HTML从python列表创建下拉菜单
我正在尝试使用来自python脚本的信息在HTML中创建一个下拉菜单.不过,到目前为止我已经让它工作了,html下拉列表将列表中的所有4个值显示为4个选项. 当前:选项1:红色.蓝色.黑色.橙色:选项 ...
- python前端界面模板_Python编程flask使用页面模版的方法
在flask中可以像go和angular那样使用页面模版(template),可以将HTML页面显示进行模版化,通过参数传递与页面进行数据交互. 概要信息 事前准备:flask liumiaocn:f ...
- python flask高级编程之restful_python Flask实现restful api service
一直在用node.js做后端,要逐步涉猎大数据范围,注定绕不过python,因此决定把一些成熟的东西用python来重写,一是开拓思路.通过比较来深入学习python:二是有目标,有动力,希望能持之以 ...
- [Link]选择一个 Python Web 框架:Django vs Flask vs Pyramid
选择一个 Python Web 框架:Django vs Flask vs Pyramid
- 日志服务Python消费组实战(三):实时跨域监测多日志库数据
解决问题 使用日志服务进行数据处理与传递的过程中,你是否遇到如下监测场景不能很好的解决: 特定数据上传到日志服务中需要检查数据内的异常情况,而没有现成监控工具? 需要检索数据里面的关键字,但数据没有建 ...
- python flask框架是什么_Python Flask框架详解
原博文 2020-04-08 23:33 − 记录请求使用的HTTP方法 Flask 本身相当于一个内核,其他几乎所有的功能都要用到扩展,都需要用第三方的扩展来实现,比如可以用 Flask 扩展加入O ...
- python flask快速入门与进阶-Flask基础进阶与python flask实战bbs教程
├─Flask基础进阶 │ 01-HTTP 基础知识.mp4 │ 02-python CGI 与 WebServer.mp4 │ 03-virtuanenv配置及Flask快速示例.mp4 │ 04- ...
最新文章
- ubuntu和windows系统双系统的开机选项界面有很多无关选项
- webshpere下载地址
- RTEMS移植USB无线网卡的设想
- 电商那些年,我摸爬打滚出的高并发架构实战精髓(续)
- flowable背压 取消_使用Flowable.generate()生成可感知背压的流– RxJava常见问题解答...
- 【USACO2006 Mar】滑雪缆车 skilift
- 小熊派开发板实践:智慧路灯沙箱实验之真实设备接入
- vs2010 sp1 安装Silverlight5 语言版本不匹配 解决方案
- java导入功能超时问题
- ensp查看历史配置命令_学习华为ensp基本命令小技巧
- Hbuilder里运行到手机或模拟器手机和电脑配置
- tumblr_如何在您的Tumblr博客中添加论坛
- CentOS NFS
- TFT LCD屏接口芯片-通达LT7381(SSD1963)
- jbpm工作流动态会签
- 对整行tr除最后一列外的每一列设置点击事件
- 网易互娱人工智能工程师笔试题
- TestDirector自定义管理:工程配置
- c# emgucv 切图_(转载)C#下的openCV(Emgu CV)
- 电子计算机管理应用,电子计算机在企业管理中的应用探讨