Flask 跨域问题

一、什么是跨域

跨域是指:浏览器A服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。

同源策略是指:浏览器A服务器B获取的静态资源,包括Html、Css、Js,为了用户安全,浏览器加了限制,其中的Js通过Ajax只能访问B服务器的静态资源或请求。即:浏览器A从哪拿的资源,那资源中就只能访问哪。

同源是指:同一个请求协议(如:Http或Https)、同一个Ip、同一个端口,3个全部相同,即为同源。

跨域的处理

W3C组织制定了一个Cross-Origin Resource Sharing规范,简写为Cors,现在这个规范已经被大多数浏览器支持,Cors 专门用来处理跨域的需求。

Cors需要在后端应用进行配置,因此,是一种跨域的后端处理方式,这么做也容易理解,一个你不认识的源来访问你的应用,自然需要应用进行授权。除了后端处理方式,也有前端的解决方案,如:JSONP,这里我们主要讲解Flask后端配置方案.

跨域的分类

跨域分为以下3种

名称英文名说明
简单请求Simple Request发起的Http请求符合:
1.无自定义请求头,只有Accept、Accept-Language、Content-Language、Last-Event-ID
2.请求动词为GET、HEAD或POST之一
3.动词为POST时,Content-Type是application/x-www-form-urlencoded,multipart/form-data或text/plain之一
复杂请求Preflighted Request发起的Http请求符合其中之一:
1.包含了自定义请求头
2.请求动词不是GET、HEAD或POST
3.动词是POST时, Content-Type不是application/x-www-form-urlencoded,multipart/form-data或text/plain。 即:简单请求的相反
凭证请求Requests with Credential发起的Http请求中带有凭证

简单请求

简单请求的发送从代码上来看和普通的XHR没太大区别,但是HTTP头当中要求总是包含一个域(Origin)的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送,并不是开发者代码可以触及到的。

简单请求的部分响应头如下:

  1. Access-Control-Allow-Origin(必含)。不填,请求按失败处理。该项控制数据的可见范围,如果希望数据对任何人都可见,可以填写"*"。
  2. Access-Control-Allow-Credentials(可选)。该项标志着请求当中是否包含cookies信息,只有一个可选值:true(必为小写)。如果不包含cookies,请略去该项,而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致,即withCredentials为true时该项也为true;withCredentials为false时,省略该项不写。反之则导致请求失败。
  3. Access-Control-Expose-Headers(可选) – 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。通常情况下,getResponseHeader()方法只能获得如下的信息:(当你需要访问额外的信息时,就需要在这一项当中填写并以逗号进行分隔)
    1. Cache-Control
    2. Content-Language
    3. Content-Type
    4. Expires
    5. Last-Modified
    6. Pragma

如果仅仅是简单请求,那么即便不用CORS也没有什么大不了,但CORS的复杂请求就令CORS显得更加有用了。简单来说,任何不满足上述简单请求要求的请求,都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作,或者发送Content-Type: application/json的内容。

复杂请求

复杂请求先发送一种"预请求",此时作为服务端,也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求,只有当预请求成功返回,实际请求才开始执行。预请求以OPTIONS形式发送,当中同样包含域,并且还包含了两项CORS特有的内容:

  1. Access-Control-Request-Method – 该项内容是实际请求的种类,可以是GET、POST之类的简单请求,也可以是PUT、DELETE等等。
  2. Access-Control-Request-Headers – 该项是一个以逗号分隔的列表,当中是复杂请求所使用的头部。

显而易见,这个预请求实际上就是在为之后的实际请求发送一个权限请求,在预回应返回的内容当中,服务端应当对这两项进行回复,以让浏览器确定请求是否能够成功完成。复杂请求的部分响应头及解释如下:

  1. Access-Control-Allow-Origin(必含) – 和简单请求一样的,必须包含一个域。
  2. Access-Control-Allow-Methods(必含) – 这是对预请求当中Access-Control-Request-Method的回复,这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法,但服务端仍然可以返回所有允许的方法,以便客户端将其缓存。
  3. Access-Control-Allow-Headers(当预请求中包含Access-Control-Request-Headers时必须包含) – 这是对预请求当中Access-Control-Request-Headers的回复,和上面一样是以逗号分隔的列表,可以返回所有支持的头部。这里在实际使用中有遇到,所有支持的头部一时可能不能完全写出来,而又不想在这一层做过多的判断,没关系,事实上通过request的header可以直接取到Access-Control-Request-Headers,直接把对应的value设置到Access-Control-Allow-Headers即可。
  4. Access-Control-Allow-Credentials(可选) – 和简单请求当中作用相同。
  5. Access-Control-Max-Age(可选) – 以秒为单位的缓存时间。预请求的的发送并非免费午餐,允许时应当尽可能缓存。

一旦预回应如期而至,所请求的权限也都已满足,则实际请求开始发送。

目前大部分Modern浏览器已经支持完整的CORS,但IE直到IE11才完美支持,所以对于PC网站,还是建议采用其他解决方案,如果仅仅是移动端网站,大可放心使用。

Flask配置跨域

flask 配置cors 有两种方式,一种使用自带的cors,一种自定义返回头

第一种,自定义返回头

@app.after_request
def af_request(resp):     """#请求钩子,在所有的请求发生后执行,加入headers。:param resp::return:"""resp = make_response(resp)resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'return resp

第二种,使用cors

Flask配Cors跨域,使用Flask-CORS包,详细文档,参见: https://flask-cors.readthedocs.io/en/latest/

flask-cors 也提供了两种方式:

方式

范围

说明

@cross_origin装饰器

配置单个路由

适用于配置特定的API接口

CORS函数

配置全局API接口

适用于全局的API接口配置

安装flask-cors

pip install flask-cors

第一种:使用@cross_origin装饰器

@app.route("/")
@cross_origin()
def helloWorld():return "Hello, cross-origin-world!"

CORS参数说明 

装饰器参数

类型

Head字段

说明

origins

列表、字符串或正则表达式

Access-Control-Allow-Origin

配置允许跨域访问的源,*表示全部允许

methods

列表、字符串

Access-Control-Allow-Methods

配置跨域支持的请求方式,如:GET、POST

expose_headers

列表、字符串

Access-Control-Expose-Headers

自定义请求响应的Head信息

allow_headers

列表、字符串或正则表达式

Access-Control-Request-Headers

配置允许跨域的请求头

supports_credentials

布尔值

Access-Control-Allow-Credentials

是否允许请求发送cookie,false是不允许

max_age

整数、字符串

Access-Control-Max-Age

预检请求的有效时长

第二种:使用CORS函数

#################### 应用全局配置 ####################
from flask_cors import *app = Flask(__name__)
CORS(app, supports_credentials=True, resources=r"/*")@app.route("/api/v1/users")
def list_users():return "user example"#################### 单独Blueprints配置 ####################
api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1) @api_v1.route("/api/v1/users/")
def list_users():return "user example"

CORS参数说明

参数

类型

Head字段

说明

resources

字典、迭代器或字符串

全局配置允许跨域的API接口

origins

列表、字符串或正则表达式

Access-Control-Allow-Origin

配置允许跨域访问的源,*表示全部允许

methods

列表、字符串

Access-Control-Allow-Methods

配置跨域支持的请求方式,如:GET、POST

expose_headers

列表、字符串

Access-Control-Expose-Headers

自定义请求响应的Head信息

allow_headers

列表、字符串或正则表达式

Access-Control-Request-Headers

配置允许跨域的请求头

supports_credentials

布尔值

Access-Control-Allow-Credentials

是否允许请求发送cookie,false是不允许

max_age

整数、字符串

Access-Control-Max-Age

预检请求的有效时长

注意:继承Resource类来写的RESTful-API接口

继承Resource类来写的RESTful-API接口不能使用上述办法。解决办法是在需要支持跨域请求的API类下,添加一个类方法options,就可以解决跨域问题

原因是跨域问题请求的时候,无论是POST请求还是PUT请求,前端都会优先发起一个OPTIONS请求确认请求允许范围.那么在解决跨域请求时,只需要在每个资源url中加入options请求方式,并返回适当的响应头信息就能解决跨域问题.

class YourAPI(Resource):def options(self):return {'Allow': '*'}, 200, {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'HEAD, OPTIONS, GET, POST, DELETE, PUT','Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',}

具体可配置参数解释:

  • Access-Control-Allow-Origin
    这个头部信息由服务器返回,用来明确指定那些客户端的域名允许访问这个资源。它的值可以是:

    -使用" * " —— 允许任意域名

    • 一个完整的域名名字(比如:https://example.com)

    如果你需要客户端传递验证信息到头部(比如:cookies)。这个值不能为 * —— 必须为完整的域名(这点很重要)。

  • Access-Control-Allow-Credentials
    这个头部信息只会在服务器支持通过cookies传递验证信息的返回数据里。它的值只有一个就是 true。跨站点带验证信息时,服务器必须要争取设置这个值,服务器才能获取到用户的cookie。

  • Access-Control-Allow-Headers
    提供一个逗号分隔的列表表示服务器支持的请求数据类型。假如你使用自定义头部(比如:x-authentication-token 服务器需要在返回OPTIONS请求时,要把这个值放到这个头部里,否则请求会被阻止)。

  • Access-Control-Expose-Headers
    相似的,这个返回信息里包含了一组头部信息,这些信息表示那些客户端可以使用。其他没有在里面的头部信息将会被限制(译者注:这个头信息实战中使用较少)。

  • Access-Control-Allow-Methods
    一个逗号分隔的列表,表明服务器支持的请求类型(比如:GET, POST)

  • Origin
    这个头部信息,属于请求数据的一部分。这个值表明这个请求是从浏览器打开的哪个域名下发出的。出于安全原因,浏览器不允许你修改这个值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454026.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.3 使用电脑测试MC20的电话语音功能

需要准备的硬件 MC20开发板 1个https://item.taobao.com/item.htm?id562661881042GSM/GPRS天线 1根https://item.taobao.com/item.htm?id531979567261IPEX接口转SMA接口转接线 1根https://item.taobao.com/item.htm?id531979903836GPS有源天线 1根https://item.taobao.com/i…

前端之 AJAX

AJAX参数详细列表 参数名类型描述urlString(默认: 当前页地址) 发送请求的地址。typeString(默认: "GET") 请求方式 ("POST" 、 "GET")。注意:其它 HTTP 请求方法,如 PUT 和 DELETE ,但仅部分浏览器支持。tim…

html5--1.18 div元素与布局

1.18 div元素与布局 1.元素的分类2.div元素与布局 1、元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行;通常可以作为容器在内部添加其他元素。已经学过的块元素有: h1~h6;hr;ul;ol;p;table......... 内联元素:不会产生…

五个优秀的视频格式转换工具

电脑、手机、DVD播放机、PSP……这么多的东西都可以播放视频,但是视频格式又千差万别的,我们该怎么办?这里,我们介绍五个功能强大且易于使用的媒体转换器,用于转换不同类型的视频文件。 一、Super (Windows) Super是一…

艾宾浩斯记忆表格excel_Excel全年学习复习计划表(艾宾浩斯遗忘曲线)

最近准备考在职博士,刷刷学历,不得不又拿起必考的英语来,发现由于这几年敲代码,日常生活词汇忘了很多,只好买本考博词汇背诵,不过三十而立的人背起来确实费劲了,所以开始寻找好的背诵方法。又想…

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站:http://layout.jquery-dev.com/index.cfm使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏…

前端之 CSS

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。 CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器…

在Window下编译OpenH323

前言: 本文只提供VC6.0的编译说明,如果想知道VC.Net下的编译过程请参看原文。 原文 : http://www.voxgratia.org/docs/pwlib_windows.html#msvc_headers 作者 :Craig Southeren 翻译 : Richard 原文…

matlab立体坐标定位_无惧密集建筑,小天才立体定位技术带来最强定位体验

如今,在可穿戴设备市场中,智能手表占据相当大一部分。而作为核心功能之一的定位,在智能手表中发挥着不可替代的作用,尤其是对于儿童电话手表而言。并且,在技术飞速进步,产品迭代加快的当前,儿童…

svga文件如何查看_电脑隐藏文件?如何查看隐藏文件 方法简单易学

大家好,我是小白一键重装软件的客服。如何查看隐藏文件呢?有时候不小心把文件夹勾选隐藏后文件就消失了,到底是怎么回事呢?其实这个是电脑上面一些设置开启了文件隐藏的功能哦,那么下面小白系统带你了解下如何查看隐藏…

化工图纸中LISP_必备干货丨石油化工安装工程质量与成本控制研究

对于整个石油化工工程来说,石油化工的安装工程在其中是最重要并且最核心的一个环节,其对石油化工工程的质量有着决定性的作用。从客观的角度来说,如果石油化工安装工程在实际的施工过程中出现任何的问题,就会威胁到周边人群的生命…

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突 这节我详细说下 ADDS使用stamp来作为解决冲突的依据 Stamp由三块组成 Version, time stamp , source DC GUID (发生对象修改行为的源DC的GUID) 一般来说冲突分为几下情况: 1-属性冲突 你可以用repadmin来查看版…

vue新手入门——vue-cli搭建

首先说明,以下内容vue官网都有文档,如果觉得麻烦啰嗦,请移步至 安装-vue.js 。 准备工作: 1.下载并安装node环境,一般情况下安装好node之后,npm也会安装好。具体安装的话,百度大概能帮得上忙。 …

如何看懂源代码–(分析源代码方法)

我们在写程式时,有不少时间都是在看别人的代码。例如看小组的代码,看小组整合的守则,若一开始没规划怎么看, 就会“噜看噜苦(台语) ” 不管是参考也好,从开源抓下来研究也好,为了了解…

LNMP环境添加第三方模块

一.在LNMP环境下添加memcache模块 1.安装依赖库(libevent) [rootnode1 ~]# tar xvf libevent-2.0.21-stable.tar.gz [rootnode1 ~]# cd libevent-2.0.21-stable [rootnode1 libevent-2.0.21-stable]# ./configure --prefix/usr/local/libevent [rootnode1 libevent-2.0.21-sta…

学生成绩管理系统-程序维护

托管平台地址:https://gitee.com/lucess/StudentMarkManage.git 小组名称:干翻沈师 程序运行方法: 1、后台服务:进入项目文件夹执行 python TeamProject.py runsercer 0.0.0.0:5050 2、前台服务:进入./WEB-INFO/TeamProjectWeb 文件夹执行 ya…

改需求

转载于:https://www.cnblogs.com/gw2010/p/7856484.html

架构师一般做到多少岁_软件测试可以做到多大岁数?

做这个行业也几年了,经常听到有人问,软件测试这个行业能干到多少岁,当然里边包含想要进入这个行业的和已经在这个行业里边发展的!基本上软件测试可以分为三条职业发展路线:技术路线、管理路线、产品路线!目…

day13 迭代器和生成器

一、上节回顾和作业讲解: 1、如果这个网页没有被爬取过就真的去访问这个网页,否则就返回之前访问的时候缓存文件中的内容 (重要的例子) from urllib.request import urlopen def wrapper(func):def inner(*args, **kwargs):with o…

Centos7.0 搭建Zabbix环境

实验环境:Centos7.0IP:192.168.47.140关闭iptables及setenforce导入源 rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabbix-release-3.0-1.el7.noarch.rpm安装zabbix包安装完成安装mysql源wget http://repo.mysql.com/mysql-community-release-el7-5…