专栏首页RgcFlask配置Cors跨域

Flask配置Cors跨域

1 跨域的理解

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

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

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

2 跨域的处理

跨域的这种需求还是有的,因此,W3C组织制定了一个Cross-Origin Resource Sharing规范,简写为Cors,现在这个规范已经被大多数浏览器支持,从而,处理跨域的需求。

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

3 跨域的分类

跨域分为以下3种

名称

英文名

说明

简单请求

Simple Request

发起的Http请求符合:1.无自定义请求头,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请求中带有凭证

4 Flask配置Cors

Flask配Cors跨域,使用Flask-CORS包,详细文档,参见: https://flask-cors.readthedocs.io/en/latest/,总的来说,flask-cors包也提供了两种方式

方式

范围

说明

@cross_origin装饰器

配置单个路由

适用于配置特定的API接口

CORS函数

配置全局API接口

适用于全局的API接口配置

3.1 安装flask-cors

pip install flask-cors

3.2 使用@cross_origin装饰器

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

装饰器参数

类型

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

预检请求的有效时长

3.3 使用CORS函数

3.3.1 应用全局配置

app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route("/api/v1/users")
def list_users():
  return "user example"

3.3.2 单独Blueprints配置

api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1) 

@api_v1.route("/api/v1/users/")
def list_users():
  return "user example"

3.3.3 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

预检请求的有效时长

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.cnblogs.com/rgcLOVEyaya复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • java配置跨域springboot配置Cors跨域

    码农笔录
  • Python | Flask 解决跨域问题

    常用的我们可以配置 origins、methods、allow_headers、supports_credentials

    双鬼带单
  • Flask解决跨域问题

    学习前端网络请求部分的时候,用Flask实现一个简单的后端服务器,但是遇到了跨域问题。

    花猪
  • Python 使用CORS跨域资源共享解决flask服务器跨域问题、浏览器同源策略

    flask 装饰器跨域解决方法: 首先 pip install flask_cors 安装对应的库。

    小蓝枣
  • flask cors跨域请求(flask 102)

    当调用服务端的域名与服务端不一致(前后端分离)的时候会出现跨域问题,可使用Flask-Cors解决以上问题 安装Flask-Cors pip3 instal...

    用户5760343
  • flask 完成简单查询请求处理,及跨域

    http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-application

    流川疯
  • ASP.NET Core 配置跨域(CORS)

    主要是 app.UseCors("cors");这句代码,需要注意的是必须放在 UseMvc 之前,且策略名称必须是已经定义的。

    晓晨
  • flask同源策略解决办法及flask-cors只允许特定域名跨域

    https://flask-cors.corydolphin.com/en/latest/api.html

    用户1558882
  • 如何解决调用AI人脸识别出现跨域问题?

    人脸识别已经是智慧化发展的一个重要标志了,一般分为两个步骤:前端人脸图像采集系统通过抓拍采集人脸图像、实时视频流等,后端的智能平台可将前端采集的相关数据统一进行...

    TSINGSEE青犀视频
  • 再遇CORS -- 自定义HTTP header的导致跨域

    出于多种考虑,放弃了使用类似WordPress这种现成博客解决方案,准备自己搭建一个博客系统,技术选型为:后端:Flask,前端:Vue。登录状态管理放弃coo...

    HaythamXu
  • 你所需要的跨域问题的全套解决方案都在这里啦!(前后端都有)

    随着RESTful架构风格成为主流,以及Vue.js、React.js和Angular.js这三大前端框架的日益强大,越来越多的开发者开始由传统的MVC架构转向...

    一只图雀
  • Python Tornado之跨域请求与Options请求方式

    公司的项目是前后端分离,前端Vue+后端JavaSpringBoot为主,部分功能是PythonTornado,那么需要支持一个是跨域以及Options请求。

    砸漏
  • 你所需要的跨域问题的全套解决方案都在这里啦!(升级版)

    随着RESTful架构风格成为主流,以及Vue.js、React.js和Angular.js这三大前端框架的日益强大,越来越多的开发者开始由传统的MVC架构转向...

    一只图雀
  • 使用Flask和Vue.js开发一个单页面应用程序(一)

    首先,我会使用Vue CLI搭建一个新的Vue应用程序,然后通过Python和Flask支持的后端RESTful API执行基本的CRUD操作。

    TalkPython
  • Vue + Flask 实战开发系列(一)

    我写东西喜欢写系列,系列输出可以让掌握的知识更加牢固和系统化。系统化、结构化的知识,可以让我们的大脑记忆的更好。这个系列主要使用Vue和Flask来完成一个前后...

    TalkPython
  • Vue学习-axios

    以下的axios网络请求的代码都在Vue项目src文件夹下的main.js中完成。

    花猪
  • 跨域共享CORS详解及Gin配置跨域

    常见_youmen
  • 实用,完整的HTTP cookie指南

    cookie 是后端可以存储在用户浏览器中的小块数据。 Cookie 最常见用例包括用户跟踪,个性化以及身份验证。

    前端小智@大迁世界

扫码关注云+社区

领取腾讯云代金券