在Flask中实现跨域请求(CORS)

ops/2025/1/15 23:25:10/

在Flask中实现跨域请求(CORS,Cross-Origin Resource Sharing)主要涉及到对Flask应用的配置,以允许来自不同源的请求访问服务器上的资源。以下是在Flask中实现CORS的详细步骤和方法:

一、理解CORS

CORS是一种机制,它使用额外的HTTP头部来告诉浏览器,让运行在一个origin(域)上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域HTTP请求。出于安全原因,浏览器会限制从脚本内发起的跨域HTTP请求。CORS机制允许服务器指定哪些外部网站可以访问其资源,从而安全地实现跨域资源共享。

二、安装Flask-CORS扩展

Flask-CORS是一个Flask扩展,用于处理跨源资源共享(CORS),使得跨域请求变得简单。首先,你需要安装这个扩展。通过pip安装Flask-CORS:

pip install flask-cors

三、配置Flask-CORS

在Flask应用中配置Flask-CORS有几种方式,可以根据你的需求选择适合的配置方法。

1. 使用@cross_origin装饰器

@cross_origin装饰器可以应用于Flask视图函数上,允许对单个路由进行CORS配置。例如,允许所有域的GET和POST请求访问/api/data接口:

python">from flask import Flask, jsonify  
from flask_cors import cross_origin  app = Flask(__name__)  @app.route('/api/data', methods=['GET', 'POST'])  
@cross_origin(origin='*')  # 允许所有域的请求  
def get_data():  return jsonify({'data': 'Hello, CORS!'})  if __name__ == '__main__':  app.run(debug=True)

在这个例子中,@cross_origin(origin='*')装饰器表示允许所有域的请求访问/api/data接口。你也可以指定特定的域,如origin='http://example.com'

2. 全局配置CORS

如果你想要为整个Flask应用配置CORS,可以在创建Flask应用实例后,使用CORS类进行全局配置。例如,允许所有域的请求访问所有路由:

python">from flask import Flask  
from flask_cors import CORS  app = Flask(__name__)  
CORS(app, resources=r'/*')  # 允许所有路由的跨域请求  @app.route('/api/data')  
def get_data():  return jsonify({'data': 'Hello, CORS with global settings!'})  if __name__ == '__main__':  app.run(debug=True)

在这个例子中,CORS(app, resources=r'/*')表示允许对所有路由进行跨域请求。resources参数是一个字典或正则表达式字符串,用于指定哪些路由需要CORS支持。

3. 对特定路由进行CORS配置

如果你只想对特定路由进行CORS配置,可以在resources参数中指定这些路由。例如:

python">CORS(app, resources={r"/api/*": {"origins": "*"}})

这表示允许所有域的请求访问以/api/开头的所有路由。

四、CORS参数说明

在配置CORS时,可以使用多个参数来进一步控制跨域请求的行为。以下是一些常用的参数:

  • origins:允许哪些源(域名、URI模式或正则表达式)进行跨域请求。如果设置为'*',则允许所有源的请求。
  • methods:允许哪些HTTP方法(如GET、POST)进行跨域请求。默认为['OPTIONS', 'HEAD', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE']
  • allow_headers:允许哪些请求头进行跨域请求。默认为['*'],表示允许所有请求头。
  • expose_headers:允许哪些响应头暴露给前端JavaScript代码。默认为[],表示不暴露任何响应头。
  • supports_credentials:是否允许携带凭据信息(如Cookies和HTTP认证信息)进行跨域请求。默认为False。如果设置为True,则需要确保前端在发送请求时也设置了withCredentialstrue

五、注意事项

  • 当使用CORS时,需要注意安全问题。特别是当允许来自所有域的请求时(origin='*'),这可能会使你的应用面临跨站请求伪造(CSRF)等安全风险。因此,建议尽可能指定允许的源。
  • 在前端发送跨域请求时,如果服务器配置了CORS并且允许携带凭据信息(supports_credentials=True),则需要在请求中设置withCredentialstrue。这通常在使用XMLHttpRequestfetch等API时进行设置。
  • CORS配置通常需要在服务器端进行,但也有一些前端解决方案(如JSONP)可以用于跨域请求,但JSONP只支持GET请求,并且存在安全风险,因此不推荐使用。

通过以上步骤和方法,你可以在Flask应用中实现CORS,从而允许来自不同源的请求访问你的服务器资源。


http://www.ppmy.cn/ops/111245.html

相关文章

Vue与React的Diff算法

虚拟DOM 定义 虚拟DOM是一种用于在前端开发中模拟真实DOM的技术。它是一种抽象的数据结构(简单来说就是一个Javascript对象),用于描述HTML或XML文档的结构和内容。通过将页面的状态和结构保存在内存中,而不是直接操作真实的DOM&am…

智能路口安全预警系统:精准提醒降低事故发生率

路口安全预警系统的应用,无疑是提升道路交通安全管理水平、保障公众出行安全的重要措施。其综合了多种先进技术和设备,形成了一个高效、智能的安全防护网,具体优势体现在以下几个方面: 智能识别与预警:利用AI智能识别…

Linux学习-ELK(一)

配置三台elasticsearch服务器 安装包 elasticsearch.j2 报错 #---执行rsync命令报以下错误 [rootes1 ~]# rsync -av /etc/hosts 192.168.29.172:/etc/hosts root192.168.29.172s password: bash: rsync: 未找到命令 rsync: connection unexpectedly closed (0 bytes receive…

【React Native】第三方组件

WebView Picker mode {‘dropdown’} 只在 android 生效 Swiper 搭配 ScrollView 使用 AsyncStorage AsyncStorage.setItem()AsyncStorage.getItem()AsyncStorage.removeItem()AsyncStorage.clear() Geolocation 配置添加获取定位信息的授权许可,在 androi…

自定义封装输入框组件时的一些默认样式问题处理、原生input标签样式边线等处理 之 appearance: none 魔法 真的记住了

appearance: none 魔法 appearance: none; /* 确保覆盖所有默认样式 */-moz-appearance: textfield; /* 移除 Firefox 默认的外观 */-webkit-appearance: none; /* 移除 WebKit 浏览器的默认样式 */然后就如你所愿了:

K8S - Volume - NFS 卷的简介和使用

在之前的文章里已经介绍了 K8S 中两个简单卷类型 hostpath 和 emptydir k8s - Volume 简介和HostPath的使用 K8S - Emptydir - 取代ELK 使用fluentd 构建logging saidcar 但是这两种卷都有同1个限制, 就是依赖于 k8s nodes的空间 如果某个service pod中需要的vol…

Android C++ Binder 的两种实现方式

Binder 机制是 Android 中使用最广泛的进程间通信机制,借助 Binder 开发者可以方便的开发各种实现应用间信息传输、分享的应用。对于 Android 应用开发者来说,开发都是基于 Java 语言进行的,但其实 Android 系统提供了实现 C 语言层的 Binder…

OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植案例(一)

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植指南(一) Op…