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


Posted in Python onFebruary 22, 2019

业务场景:

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

接口测试是在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 相关文章推荐
Django集成百度富文本编辑器uEditor攻略
Jul 04 Python
python实现在windows下操作word的方法
Apr 28 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
Jan 24 Python
使用实现pandas读取csv文件指定的前几行
Apr 20 Python
python使用PIL给图片添加文字生成海报示例
Aug 17 Python
pygame游戏之旅 调用按钮实现游戏开始功能
Nov 21 Python
Tensorflow分类器项目自定义数据读入的实现
Feb 05 Python
Python模块相关知识点小结
Mar 09 Python
jupyter 使用Pillow包显示图像时inline显示方式
Apr 24 Python
Python调用C语言程序方法解析
Jul 07 Python
Python之字符串的遍历的4种方式
Dec 08 Python
Python Flask实现进度条
May 11 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
Feb 22 #Python
pandas修改DataFrame列名的实现方法
Feb 22 #Python
pyhanlp安装介绍和简单应用
Feb 22 #Python
Python3.7 dataclass使用指南小结
Feb 22 #Python
Python文件读写常见用法总结
Feb 22 #Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
Feb 22 #Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
Feb 22 #Python
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
php防注入及开发安全详细解析
2013/08/09 PHP
PHP eval函数使用介绍
2013/12/08 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP中list方法用法示例
2016/12/01 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
js尾调用优化的实现
2019/05/23 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python实现QQ批量登录功能
2019/06/19 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python telnet登陆功能实现代码
2020/04/16 Python
如何基于Python按行合并两个txt
2020/11/03 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
库房主管岗位职责
2013/12/31 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
门面房租房协议书
2014/08/20 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
排查Tomcat进程假死的问题
2022/05/06 Servers