标签分类
技术文章
当前位置:主页 > 计算机编程 > python > Flask框架踩坑之ajax跨域请求实现

Flask框架ajax跨域请求实现遇到的坑

  • 发布时间:
  • 作者:码农之家原创
  • 点击:79

Flask框架踩坑之ajax跨域请求实现

这篇文章主要知识点是关于Flask,ajax跨域请求,Flask,ajax跨域,Flask框架踩坑之ajax跨域请求实现,Python Flask前后端Ajax交互的方法示例 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

零起点Python机器学习快速入门
  • 类型:机器学习大小:85.1 MB格式:PDF出版:电子工业出版社作者:何海群
立即下载

业务场景:

前后端分离需要对接数据接口。

接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用。

问题:

前端ajax请求后端接口出现跨域问题,如下图。

Flask框架踩坑之ajax跨域请求实现

翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端。

什么是Access-Control-Allow-Origin?

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?

  • 请求协议http,https的不同
  • domain的不同
  • 端口port的不同

其实说简单点,跨域,指的就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

同源是指:协议相同,域名相同,端口相同。三者同时成立才能叫同源。

浏览器的同源策略从它诞生的那一刻就出现了,具体是指从域名A下的一个页面(一般是通过ajax请求)获取域名B下的一个资源,是不被浏览器允许的。

跨域资源共享(CORS)是浏览器提供的一种跨域协商机制,让前后端协商是否可以发出跨域请求。CORS添加了若干Access-controll-request-xxx 的头,给客户端声明自己的源、要使用的头部、用使用的请求方法;添加了若干Access-Controll-Allow-xxx的头,给服务端声明自己支持跨域的源、头部和方法。

 

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许

 

解决方案(从后端解决)

1.后台接口允许跨域请求

以Python Flask框架为例,有两种方法。

第一种第三方插件实现,只需要安装第三方插件就可以轻松地为所有接口添加响应头。

复制代码 代码如下:
pip3 install flask-cors

 

pip3 install flask-cors
from flask_cors import *

app = Flask(__name__)
# r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求 
CORS(app, resources=r'/*')

Flask框架踩坑之ajax跨域请求实现

实际上就是为接口响应头添加了一个Access-Control-Allow-Origin并设置值*表示所有网站都可以请求。

第二种接口函数自定义添加属性。

res.headers['Access-Control-Allow-Origin'] = '*'
return res

为返回结果res属性headers设置Access-Control-Allow-Origin值为*。只对当前接口有效。

2.利用nginx反向代理

说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题。

一般来说可以用来做:静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等,而且实现这一切,基本只需要改改那万能的配置文件即可。

server {
    listen    80;
    server_name localhost;
      location / {
      proxy_pass http://localhost:81;
      proxy_redirect default;
    }

		location /apis { #添加访问目录为/apis的代理配置

			rewrite ^/apis/(.*)$ /$1 break;
			proxy_pass  http://localhost:82;
    }
}

1.由配置信息可知,我们让nginx监听localhost的80端口,本地的81端口有都是经过localhost的80端口进行访问。

2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。

3.rewrite ^/apis/(.*)$ /$1 break,代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。break代表匹配一个之后停止匹配。

总结一下,搭建一个nginx并把相应代码部署在服务器本机,由页面请求本域名的一个地址,转由nginx代理到目标服务器处理后返回结果给页面。这样就完美解决了跨域问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

Python Flask前后端Ajax交互的方法示例

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax

一、 post方法

1、post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件。

(1)数据附在URL里(请求路径),发送到后端。

/*前端HTML<script>里:*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );

其中ip,data_to_backend是在此代码前定义好的;data_to_backend一般是一个json数据(data_to_backend={'ip':$(this).parent().prev().text()}),而data是来自后端的返回数据。

#后端py文件(路由启动前面的html的py文件)里:添加一个路由处理前端post请求
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
   print ip
   return ip +" - ip"

点击按钮后的效果:

Python Flask前后端Ajax交互的方法示例

前端定义弹窗数据

Python Flask前后端Ajax交互的方法示例

ip在URL里

(2)数据单独发送给后端

var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};  // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});

后端处理程序:

@app.route('/js_call', methods=['GET', 'POST'])
def js_call():  
   print request.values['ip']  
   print request.values['text']  
   # to send the command by ssh : os.system("ssh user@host \' restart(command) \' ")  
   return 'ok!!!!'

Python Flask前后端Ajax交互的方法示例

post独立数据发送

二、get方法(同样可以发数据)

$.get('/js_get', {'method':'GET', 'text':"from-html"}, function(data){alert(data)})

后端路由接收处理:

@app.route('/js_get', methods=['GET'])
def js_get():
  print "method: "+request.values['method']+" --- text: "+request.values['text']
  return "get success!"

Python Flask前后端Ajax交互的方法示例

get成功

Python Flask前后端Ajax交互的方法示例

数据接收成功

注意的是:其中后端py文件的类似request.values['method']的获取数据的request是一个Python flask的模块,需要导入。

总结:

  • 在flask框架里,Ajax请求对于后端可以很容易实现,只需在后端Python代码中对ajax路径作出处理即可。
  • Ajax的post, get方法均可以向后台发送数据,只是一般用post发数据(做出改变),get请求数据(不改变)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到解决axios.interceptors.respon、 vue项目中使用md5加密以及、 儿童python编程入门书籍推、 等python文章进一步学习,感谢大家的阅读和支持。

上一篇:修改默认的pip版本为对应python2.7的实例详解

下一篇:pandas数据归一化以和行删除例程的具体办法介绍

展开 +

收起 -

学习笔记
网友NO.567880

Python中关于flask部署后并发测试的示例代码

部署后看下flask支持的并发,来个300并发看看,上代码 import threading, time, requestsurl = total = 0suc = 0fail = 0exception = 0maxtime=0mintime=100gt3=0lt3=0class RequestThread(threading.Thread):def __init__(self, thread_name): threading.Thread.__init__(self) self.test_count = 0def run(self): self.test_performace()def test_performace(self): global totalglobal sucglobal failglobal exceptionglobal gt3global lt3try: st = time.time() conn = requests.get(url) res = conn.status_codeif res== 200: total+=1suc+=1else: total+=1fail+=1time_span = time.time()-st print ('%s:%f\n'%(self.name,time_span) ) self.maxtime(time_span) self.mintime(time_span) if time_span3: gt3+=1else: lt3+=1except Exception as e: print (e ) total+=1exception+=1def maxtime(self,ts): global maxtimeprint (ts)if tsmaxtime: maxtime=tsdef mintime(self,ts): global mintimeif tsmintime: mintime=tsprint ('===========请求开始===========' )start_time = time.time()thread_count = 100i = 0 while i = thread_count: t = RequestThread(线程: + str(i)) t.start() i += 1 t=0while totalthread_count|t20:print (总数:%d,成功数:%d,失败:%d,异常:%d\n%(total,suc,fail,exception) )print (url) t+=1time.sleep(1)print ('===========task end===========')print (总数:%d,成功:%d,失败:%d,异常:%d%(total,suc,fail,exception))print ('响应最大时间:',maxtime)print ('响应最小时间',mintime)print ('大于3秒的响应:%d,占比:%0.2f'%(gt3,float(gt3)/total))print ('小于3秒:%d,占比:%0.2f'%(lt3,float(lt3)……

网友NO.961410

Flask框架Jinjia模板常用语法总结

本文实例总结了Flask框架Jinjia模板常用语法。分享给大家供大家参考,具体如下: 1. 变量表示 {{ argv }} 2. 赋值操作 {% set links = [ ('home',url_for('.home')), ('service',url_for('.service')), ('about',url_for('.about')),] %} 3. if判断 {% if not loop.first %}|{% endif %} 4. for 循环 {% for label,link in links %} {% if not loop.first %}|{% endif %} a href="{{ link }}" rel="external nofollow" {{ label }}/a{% endfor %} 5. 定义测试函数 上面 loop.first 就是一个测试函数,这个我们也可以自定义 定义是在Sample.py 里定义的, current_link 是HTML中可使用测试函数名称(可选) @app.template_test('current_link')def is_current_link(link): return link == request.path HTML中,使用例子 body{% set links = [ ('home',url_for('.home')), ('service',url_for('.service')), ('about',url_for('.about')),] %}nav {% for label,link in links %} {% if not loop.first %}|{% endif %} a href="{% if link is current_link %}# {% else %} {{ link }} {% endif %} "{{ label }}/a {% endfor %}/nav/body 6. 块block Flask强大的地方就可以引用模板,而且非常方便。 这里不得不介绍block这个概念。 模板的文件一般放在 templates 文件夹下,我们这里新建一个HTML文件,存放模板,' base.html ' 在这里面也,编排了整个页面的排版,里面会用到很多 block的占位符 。 每个block都代表一段html语句块,而这些块在哪里定义呢,可以在当前的base.html中……

网友NO.542337

python中flask应用(表单处理)

本篇文章给大家带来的内容是关于python中flask应用(表单处理),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、为什么使用Flask-WTF? request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。 尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复。 表单的HTML代码生成和验证提交的表单数据就是两个很好的例子。 优势: Flask-WTF扩展使得处理web表单能获得更愉快的体验。该扩展是一个封装了与框架无关的WTForms包的Flask集成。 2、什么是表单处理? 在网页中,为了和用户进行信息交互总是不得不出现一些表单。 flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据。 WTForm中最重要的几个概念如下: 1). Form类,开发者自定义的表单必须继承自Form类或者其子类。 Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。 2). 各种Field类,即字段。一般而言每个Field类都对应一个input的HTML标签。 比如WTForm自带的一些Field类比如BooleanField就对应input type=checkbox, SubmitField就对应input type=submit等等。 3). Validator类。这个类用于验证用户输入的数据的合法性。 比如Length验证器可以用于验证输入数据的长度, FileA……

网友NO.784942

使用Flask-Cache缓存实现给Flask提速的方法详解

本文实例讲述了使用Flask-Cache缓存实现给Flask提速的方法。分享给大家供大家参考,具体如下: Django里面可以很方便的应用缓存,那Flask里面没准备这么周全怎么办?自己造轮子么?不用的,前人种树后人乘凉,我们有Flask-Cache,用起来和Django里面一样方便哦! 1.安装 pip install Flask-Cache 2.配置 以我的zhihu项目( 源码 )为例: 在 config.py 里面,设置simple缓存类型,也可以用第三方的redis之类的,和Django一样,装好redis改下设置就行 class Config: #省略 CACHE_TYPE = 'simple' 在 app/init.py 里面 from flask_cache import Cache#缓存cache = Cache()def create_app(config_name): app = Flask(__name__) #此处省略若干字 cache.init_app(app) #工厂函数返回创建的程序示例 return app 3.应用 在 views.py 里面 from .. import db, cachefrom . import mainfrom ..decorators import admin_required, permission_required@main.route('/', methods=['GET','POST'])@cache.cached(timeout=300,key_prefix='index')#设置一个key_prefix来作为标记,然后,在内容更新的函数里面调用cache.delete('index')来删除缓存来保证用户访问到的内容是最新的def index(): print("命令行里显示我就是调用这个函数了没走缓存,不显示我就是直接走缓存没吊用函数") # 省略 return render_template('index4.html', form=form, posts=posts,show_followed=show_followed, pagination=pagination) 执行一遍,看看有没有……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明