Python中的跨域资源共享（CORS）处理

在这里插入图片描述

在Web开发中，跨域资源共享（CORS）是浏览器强制执行的安全机制，用于控制不同源（协议+域名+端口）之间的资源交互。下面我将通过Python示例详细讲解CORS的实现。

原生Python实现CORS

Flask框架手动实现CORS

from flask import Flask, jsonify, request, make_responseapp = Flask(__name__)# 手动实现CORS中间件
@app.after_request
def add_cors_headers(response):# 设置允许的来源（实际项目中应使用白名单）response.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'# 允许的请求方法response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'# 允许的请求头response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'# 是否允许携带凭证（如cookies）response.headers['Access-Control-Allow-Credentials'] = 'true'# 预检请求缓存时间（秒）response.headers['Access-Control-Max-Age'] = '86400'return response# 处理预检请求
@app.route('/api/data', methods=['OPTIONS'])
def handle_preflight():response = make_response()response.headers.add("Access-Control-Allow-Origin", "http://localhost:3000")response.headers.add("Access-Control-Allow-Headers", "Content-Type, Authorization")response.headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")response.headers.add("Access-Control-Allow-Credentials", "true")return response# API端点示例
@app.route('/api/data', methods=['GET', 'POST'])
def api_data():if request.method == 'GET':return jsonify({"message": "GET请求成功", "data": [1, 2, 3]})elif request.method == 'POST':data = request.jsonreturn jsonify({"message": "POST请求成功", "received_data": data})if __name__ == '__main__':app.run(port=5000, debug=True)

使用Flask-CORS扩展

from flask import Flask, jsonify, request
from flask_cors import CORSapp = Flask(__name__)# 配置CORS
cors = CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}},supports_credentials=True)# 或者更细粒度的控制
# cors = CORS()
# cors.init_app(app, resources={r"/api/*": {"origins": ["http://localhost:3000"]}})# API端点
@app.route('/api/users', methods=['GET'])
def get_users():return jsonify([{"id": 1, "name": "张三", "email": "zhangsan@example.com"},{"id": 2, "name": "李四", "email": "lisi@example.com"}])@app.route('/api/users', methods=['POST'])
def create_user():data = request.json# 在实际应用中，这里会将数据保存到数据库return jsonify({"message": "用户创建成功","user": data,"id": 3}), 201if __name__ == '__main__':app.run(port=5000, debug=True)

FastAPI框架实现CORS

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()# 配置CORS中间件
app.add_middleware(CORSMiddleware,allow_origins=["http://localhost:3000"],  # 允许的来源列表allow_credentials=True,  # 允许携带凭证allow_methods=["*"],      # 允许所有方法allow_headers=["*"],      # 允许所有头部expose_headers=["X-Custom-Header"],  # 暴露自定义头部max_age=86400,            # 预检请求缓存时间(秒)
)# API端点
@app.get("/api/products")
def get_products():return [{"id": 1, "name": "笔记本电脑", "price": 5999},{"id": 2, "name": "智能手机", "price": 3999},{"id": 3, "name": "平板电脑", "price": 2999}]@app.post("/api/products")
def create_product(product: dict):# 在实际应用中，这里会处理产品创建逻辑return {"message": "产品创建成功","product": product,"id": 4}if __name__ == "__main__":import uvicornuvicorn.run(app, host="0.0.0.0", port=8000)

前端示例（使用fetch API）

<!DOCTYPE html>
<html>
<head><title>CORS测试前端</title><style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f7fa;color: #333;}.container {background: white;padding: 25px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}h1 {color: #2c3e50;text-align: center;}.section {margin-bottom: 30px;padding: 20px;border-radius: 8px;background: #f8f9fa;}button {background: #3498db;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background 0.3s;}button:hover {background: #2980b9;}.result {margin-top: 15px;padding: 15px;background: #e8f4fd;border-radius: 5px;min-height: 50px;font-family: monospace;white-space: pre-wrap;}.error {background: #fde8e8;color: #e74c3c;}</style>
</head>
<body><div class="container"><h1>CORS测试前端</h1><div class="section"><h2>GET请求测试</h2><button onclick="testGetRequest()">测试GET请求</button><div id="getResult" class="result"></div></div><div class="section"><h2>POST请求测试</h2><button onclick="testPostRequest()">测试POST请求</button><div id="postResult" class="result"></div></div><div class="section"><h2>带凭证的请求</h2><button onclick="testRequestWithCredentials()">测试带凭证的请求</button><div id="credentialsResult" class="result"></div></div></div><script>const apiBaseUrl = 'http://localhost:5000/api';function displayResult(elementId, data, isError = false) {const resultElement = document.getElementById(elementId);resultElement.textContent = JSON.stringify(data, null, 2);resultElement.className = isError ? 'result error' : 'result';}// 测试GET请求async function testGetRequest() {try {const response = await fetch(`${apiBaseUrl}/data`);if (!response.ok) throw new Error(`HTTP错误! 状态: ${response.status}`);const data = await response.json();displayResult('getResult', data);} catch (error) {displayResult('getResult', { error: error.message }, true);}}// 测试POST请求async function testPostRequest() {try {const response = await fetch(`${apiBaseUrl}/data`, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: '测试数据', value: 42 })});if (!response.ok) throw new Error(`HTTP错误! 状态: ${response.status}`);const data = await response.json();displayResult('postResult', data);} catch (error) {displayResult('postResult', { error: error.message }, true);}}// 测试带凭证的请求async function testRequestWithCredentials() {try {const response = await fetch(`${apiBaseUrl}/data`, {method: 'GET',credentials: 'include'  // 包含凭据（如cookies）});if (!response.ok) throw new Error(`HTTP错误! 状态: ${response.status}`);// 检查响应头中是否有自定义头const customHeader = response.headers.get('X-Custom-Header');const data = await response.json();if (customHeader) {data.credentials = `检测到凭证请求! 自定义头: ${customHeader}`;}displayResult('credentialsResult', data);} catch (error) {displayResult('credentialsResult', { error: error.message,note: "请确保服务器设置了 'Access-Control-Allow-Credentials: true' 并且 'Access-Control-Allow-Origin' 不是 '*'"}, true);}}</script>
</body>
</html>

CORS关键概念总结

概念Python实现方式说明
Access-Control-Allow-Originresponse.headers['Access-Control-Allow-Origin'] = 'http://example.com'指定允许访问资源的来源
Access-Control-Allow-Methodsresponse.headers['Access-Control-Allow-Methods'] = 'GET, POST'允许的HTTP方法
Access-Control-Allow-Headersresponse.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'允许的请求头
Access-Control-Allow-Credentialsresponse.headers['Access-Control-Allow-Credentials'] = 'true'是否允许携带凭证
Access-Control-Max-Ageresponse.headers['Access-Control-Max-Age'] = '86400'预检请求缓存时间
预检请求处理实现OPTIONS方法处理处理浏览器发送的OPTIONS预检请求
第三方库支持Flask-CORS, FastAPI CORSMiddleware简化CORS配置的库

常见问题解决

  1. CORS错误：No ‘Access-Control-Allow-Origin’ header

    • 确保服务器正确设置了Access-Control-Allow-Origin响应头
    • 检查请求来源是否在允许的源列表中

  2. 预检请求失败

    • 确保服务器正确处理OPTIONS请求
    • 检查Access-Control-Allow-Methods和Access-Control-Allow-Headers是否包含请求中使用的方法和头

  3. 带凭证请求失败

    • 服务器需设置Access-Control-Allow-Credentials: true
    • Access-Control-Allow-Origin不能是通配符*，必须指定具体域名
    • 前端请求需设置credentials: 'include'

  4. 复杂请求被阻止

    • 对于PUT、DELETE或自定义头的请求，确保服务器响应预检请求

最佳实践

  1. 使用白名单：不要使用*作为允许的源，而是维护一个允许的域名列表
  2. 限制方法：只允许必要的HTTP方法（GET, POST等）
  3. 限制头：只允许必要的请求头
  4. 使用中间件/库：使用Flask-CORS或FastAPI的CORSMiddleware简化实现
  5. 环境区分：开发环境可放宽CORS设置，生产环境应严格限制
  6. 监控与日志：记录被拒绝的跨域请求以识别潜在问题

通过正确配置CORS，可以安全地实现跨域请求，同时保护用户数据安全。

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

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

相关文章

Kruskal算法剖析与py/cpp/Java语言实现

Kruskal算法剖析与py/cpp/Java语言实现

Kruskal算法剖析与py/cpp/Java语言实现 一、Kruskal算法的基本概念1.1 最小生成树1.2 Kruskal算法核心思想 二、Kruskal算法的执行流程三、Kruskal算法的代码实现3.1 Python实现3.2 C实现3.3 Java实现 四、算法复杂度分析4.1 时间复杂度4.2 空间复杂度 五、Kruskal算法应用场景…
阅读更多...
微信小程序返回上一页监听

微信小程序返回上一页监听

本文实现的是微信小程序在返回上一页时获取通知并自定义业务。 最简单的实现&#xff1a; 使用 wx.enableAlertBeforeUnload() 优点&#xff1a;快速接入 缺点&#xff1a;手势不能识别、无法自定义弹窗内容&#xff08;仅询问&#xff09; 方法二&#xff1a; page-conta…
阅读更多...
Excel 统计某个字符串在指定区域出现的次数

Excel 统计某个字符串在指定区域出现的次数

【本文概要】 Excel 统计某个字符串在指定区域出现的次数&#xff1a; 1、Excel 统计一个单元格内的某字符串的出现次数 2、Excel 统计某一列所有单元格内的某字符串的出现次数 3、Excel 统计某一区域所有单元格内的某字符串的出现次数 1、Excel 统计一个单元格内的某字符串的出…
阅读更多...
生物化学：药品药物 营养和补充剂信息 第三方认证信息 常见误区 汇总

生物化学：药品药物 营养和补充剂信息 第三方认证信息 常见误区 汇总

常见维生素和矿物质成分表 成分名称好处副作用&#xff08;超量或敏感情况&#xff09;运作方式推荐日剂量&#xff08;成人&#xff09;剂量说明维生素A&#xff08;视黄醇&#xff09;视力、免疫、皮肤健康过量可致肝损伤、头痛、脱发调节视网膜功能、细胞分化700–900 g RA…
阅读更多...
mock库知识笔记（持续更新）

mock库知识笔记（持续更新）

文章目录 mock简介导入方式参数简介使用场景&#xff08;待更新&#xff09;常见问题总结&#xff08;待更新&#xff09;Python代码官网 mock简介 mock是一个模拟对象库&#xff0c;具有模拟其他python对象的功能&#xff0c;还能指定模拟对象的返回值和设置模拟对象的属性。…
阅读更多...
扇形 圆形 面积公式

扇形 圆形 面积公式

✅ 一、圆的面积公式 全圆面积&#xff1a; A circle π r 2 A_{\text{circle}} \pi r^2 Acircle​πr2 ✅ 二、扇形的面积公式&#xff08;两种制式&#xff09; 弧度制&#xff1a; A sector 1 2 r 2 θ A_{\text{sector}} \frac{1}{2} r^2 \theta Asector​21​r2θ …
阅读更多...
怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)

怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)

将 Ubuntu 从机械硬盘迁移到固态硬盘是一个涉及多个步骤的过程。以下是一个基本的迁移指南&#xff1a; 1. 前期准备 1.1 备份数据&#xff1a; 确保你已备份数据&#xff0c;以防止在迁移过程中出现意外导致任何数据丢失。 1.2 固态硬盘安装&#xff1a; 确保固态硬盘正确…
阅读更多...
js中common.js和ECMAScript.js区别

js中common.js和ECMAScript.js区别

以下是关于 CommonJS 和 ECMAScript Modules&#xff08;ESM&#xff09;的详细对比分析&#xff0c;包含底层原理和示例说明&#xff1a; &#x1f9e9; 核心差异对比表 特性CommonJSES Modules来源Node.js 社区规范ECMAScript 语言标准加载方式动态加载&#xff08;运行时解…
阅读更多...
玻纤效应的时序偏差

玻纤效应的时序偏差

随着比特率继续飙升&#xff0c;光纤编织效应时序偏移正成为一个越来越严重的问题。对于 5GB/s 及以上的信号传输速率&#xff0c;它实际上会毁了您的一天。例如&#xff0c;左图显示由于 12.7 英寸的纤维编织效果&#xff0c;5GB/s 的接收眼完全闭合。使用 Agilent ADS 软件进…
阅读更多...
异步上传石墨文件进度条前端展示记录（采用Redis中String数据结构实现）

异步上传石墨文件进度条前端展示记录（采用Redis中String数据结构实现）

事件起因是客户现场需要从石墨文档中获取文件信息&#xff0c;文件信息存在存在多个&#xff0c;进行批量上传。为了用户的友好型体验&#xff0c;需要做进行条展示的方式&#xff0c;具体实现见下文… 上传流程介绍 石墨文档支持从链接&#x1f517;方式获取文件信息&#xf…
阅读更多...
3D建模的全景图谱：从55个工具到元宇宙的数字革命

3D建模的全景图谱：从55个工具到元宇宙的数字革命

3D建模已从专业工程师的工具箱演变为全民创作的数字语言。从代码驱动的精确建模到AI自动生成纹理&#xff0c;从开源协作到程序化生成城市&#xff0c;技术正重塑我们创造虚拟世界的方式。本文将系统解析55个核心3D建模工具/插件&#xff0c;涵盖在线编辑器、开源软件、程序化生…
阅读更多...
jsrpc进阶模式 秒杀js前端逆向问题 burp联动进行爆破

jsrpc进阶模式 秒杀js前端逆向问题 burp联动进行爆破

案例演示 思路就是 这个 jsrpc远程加载加密函数的方法就是 在js代码中进行插入一个 远程加载的代码 从而实现 &#xff1a; 第一步还是使用 js_tools 进行 查找算法的位置 这个可以帮助我们找到明文>密文 加密算法函数的位置 因为这个需要我们进行js前端代码的修改 所以…
阅读更多...
基于BERT-Prompt的领域句子向量训练方法

基于BERT-Prompt的领域句子向量训练方法

基于BERT-Prompt的领域句子向量训练方法 一、核心原理：基于BERT-Prompt的领域句子向量训练方法 论文提出一种结合提示学习（Prompt Learning）和BERT的领域句子向量训练方法，旨在解决装备保障领域文本的语义表示问题。核心原理如下： 以下通过具体例子解释传统词向量方法和…
阅读更多...
Python PyMySQL

Python PyMySQL

1.PyMySQL是什么 是Python操作mysql的一个包 2.PyMySQL使用基本步骤 2.1 创建连接 conn pymysql.connect(host10.248.53.148,password123456,port3306,userroot,databasetest_database,charsetutf8)2.2 游标 2.2.1 什么是游标 游标实际上是一种能从包括多条数据记录的结果…
阅读更多...
OC—UI学习-1

OC—UI学习-1

OC—UI学习 UILabel UILabel是UIKit框架中的一个类Label主要参数 text&#xff1a;文本frame&#xff1a;位置框架backgroundcolor&#xff1a;背景颜色textAlignment&#xff1a;设置文本在Label中的位置textColor&#xff1a;文本颜色shadowColor&#xff1a;阴影颜色shado…
阅读更多...
【应用密码学】实验七 Hash函数——SM3

【应用密码学】实验七 Hash函数——SM3

一、实验要求与目的 理解哈希函数的基本原理及在密码学中的应用&#xff1b;掌握国密哈希标准 SM3 的算法结构&#xff1b;编程实现 SM3 摘要算法&#xff0c;包括消息填充、消息扩展、压缩函数及摘要输出&#xff1b;对中间变量 W、W′ 和 A~H 的迭代过程进行可视化&#xff…
阅读更多...
进行性核上性麻痹护理之道：助力患者舒适生活

进行性核上性麻痹护理之道：助力患者舒适生活

进行性核上性麻痹是一种缓慢进展的神经退行性疾病&#xff0c;主要影响患者的运动、语言和吞咽功能&#xff0c;给日常生活带来诸多不便。除了遵医嘱接受药物或物理治疗&#xff0c;科学的健康护理对延缓病情发展、提升生活质量尤为重要。 运动康复是护理的关键环节。由于患者常…
阅读更多...
5G 核心网中 NRF 网元的功能、接口及参数详解

5G 核心网中 NRF 网元的功能、接口及参数详解

引言 在 5G 核心网的架构体系里，网络存储功能（Network Repository Function，NRF）占据着关键地位，承担着核心网网络功能（Network Function，NF）的注册、发现以及服务管理等重要任务，为整个 5G 网络的高效稳定运行提供了坚实支撑。接下来，让我们深入剖析 NRF 网元在注册…
阅读更多...
HUAWEI交换机配置镜像口验证（eNSP）

HUAWEI交换机配置镜像口验证（eNSP）

技术术语&#xff1a; 流量观察口&#xff1a;就是我们常说的镜像口&#xff0c;被观察的流量的引流目的端口 流量源端口&#xff1a;企业生产端口&#xff0c;作为观察口观察对象。 命令介绍&#xff1a; [核心交换机]observe-port [观察端口ID或编号&#xff08;数字&am…
阅读更多...
Spring AI Alibaba 发布企业级 MCP 分布式部署方案

Spring AI Alibaba 发布企业级 MCP 分布式部署方案

作者&#xff1a; 影子&#xff0c;刘宏宇&#xff0c;刘军 Spring AI 通过集成 MCP 官方的 java sdk&#xff0c;让 Spring Boot 开发者可以非常方便的开发自己的 MCP 服务&#xff0c;把自己企业内部的业务系统通过标准 MCP 形式发布为 AI Agent 能够接入的工具&#xff1b;…
阅读更多...
最新文章

Copyright @ 2022~2023