当前位置：首页 > news >正文

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

news 来源：原创 2025/5/30 13:14:08

在这里插入图片描述

在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-Origin	`response.headers['Access-Control-Allow-Origin'] = 'http://example.com'`	指定允许访问资源的来源
Access-Control-Allow-Methods	`response.headers['Access-Control-Allow-Methods'] = 'GET, POST'`	允许的HTTP方法
Access-Control-Allow-Headers	`response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'`	允许的请求头
Access-Control-Allow-Credentials	`response.headers['Access-Control-Allow-Credentials'] = 'true'`	是否允许携带凭证
Access-Control-Max-Age	`response.headers['Access-Control-Max-Age'] = '86400'`	预检请求缓存时间
预检请求处理	实现OPTIONS方法处理	处理浏览器发送的OPTIONS预检请求
第三方库支持	Flask-CORS, FastAPI CORSMiddleware	简化CORS配置的库

常见问题解决

CORS错误：No ‘Access-Control-Allow-Origin’ header
- 确保服务器正确设置了Access-Control-Allow-Origin响应头
- 检查请求来源是否在允许的源列表中
预检请求失败
- 确保服务器正确处理OPTIONS请求
- 检查Access-Control-Allow-Methods和Access-Control-Allow-Headers是否包含请求中使用的方法和头
带凭证请求失败
- 服务器需设置Access-Control-Allow-Credentials: true
- Access-Control-Allow-Origin不能是通配符*，必须指定具体域名
- 前端请求需设置credentials: 'include'
复杂请求被阻止
- 对于PUT、DELETE或自定义头的请求，确保服务器响应预检请求