Super Resolution响应头配置：CORS/Cache-Control设置教程

Super Resolution响应头配置：CORS/Cache-Control设置教程

你是不是遇到过这种情况：辛辛苦苦把AI超分服务部署好了，前端页面也能正常访问，但就是没法在自己的网站上调用？或者用户抱怨图片加载太慢，每次都要重新处理？

这些问题很可能出在响应头配置上。今天，我就来手把手教你如何为Super Resolution服务配置CORS和Cache-Control，让你的AI画质增强服务既安全又好用。

1. 为什么需要配置响应头？

在开始动手之前，我们先搞清楚为什么要折腾这些配置。

想象一下，你的Super Resolution服务部署在https://ai.yoursite.com，而你的主站是https://www.yoursite.com。当用户在主站上传图片并调用超分服务时，浏览器会出于安全考虑阻止这个请求——这就是著名的"同源策略"在作祟。

CORS（跨源资源共享）就是解决这个问题的钥匙。它通过一组HTTP头告诉浏览器："这个资源允许来自其他源的请求访问。"

另一个常见问题是性能。每次用户请求同一张图片的超分结果，服务都要重新处理一遍，既浪费算力又让用户等得着急。Cache-Control头能告诉浏览器和中间缓存："这个结果可以缓存多久"，下次再请求时直接使用缓存，速度飞快。

2. 环境准备与代码结构

我们的Super Resolution服务基于Flask框架，代码结构很清晰。在开始配置前，先确保你了解服务的基本结构。

# app.py 主文件结构示意 from flask import Flask, request, send_file, jsonify from super_resolution import SuperResolution app = Flask(__name__) sr = SuperResolution() @app.route('/api/enhance', methods=['POST']) def enhance_image(): # 处理图片上传和超分逻辑 pass if __name__ == '__main__': app.run(host='0.0.0.0', port=7860)

关键文件位置：

• app.py- 主服务文件，我们将在这里添加响应头配置
• super_resolution.py- 超分处理逻辑
• requirements.txt- 依赖包列表
• /root/models/- EDSR模型文件持久化存储目录

3. CORS配置详解与实现

CORS配置听起来复杂，其实原理很简单：就是在响应中添加几个特定的HTTP头。Flask提供了专门的扩展来简化这个工作。

3.1 安装必要的依赖

首先，确保你的环境中有Flask-CORS扩展：

# 如果使用requirements.txt，添加以下行 # requirements.txt Flask==2.3.3 Flask-CORS==4.0.0 opencv-contrib-python==4.8.1.78 numpy==1.24.3 Pillow==10.0.0 # 安装命令 pip install -r requirements.txt

3.2 基础CORS配置

最简单的配置是允许所有来源的请求，这在开发阶段很方便：

from flask import Flask from flask_cors import CORS app = Flask(__name__) # 最简单的配置 - 允许所有来源 CORS(app) # 或者更精细的控制 cors = CORS(app, resources={ r"/api/*": { "origins": "*", # 允许所有来源 "methods": ["GET", "POST", "OPTIONS"], # 允许的方法 "allow_headers": ["Content-Type", "Authorization"] # 允许的请求头 } })

这种配置适合什么场景？

• 测试环境
• 公开的API服务
• 当你还不确定会有哪些前端应用调用时

3.3 生产环境CORS配置

在生产环境中，我们通常需要更严格的限制。下面是一个生产级别的配置示例：

from flask import Flask from flask_cors import CORS app = Flask(__name__) # 生产环境推荐配置 cors = CORS(app, resources={ r"/api/enhance": { "origins": [ "https://www.yourdomain.com", "https://app.yourdomain.com", "https://admin.yourdomain.com" ], "methods": ["POST", "OPTIONS"], # 超分服务通常只需要POST "allow_headers": ["Content-Type", "X-Requested-With", "Authorization"], "expose_headers": ["Content-Length", "X-Process-Time"], # 允许前端访问的响应头 "supports_credentials": False, # 是否允许携带cookie，通常API服务设为False "max_age": 86400 # 预检请求缓存时间（秒） } }) # 对于静态文件（如处理后的图片）可以单独配置 cors = CORS(app, resources={ r"/api/enhance": { "origins": ["https://www.yourdomain.com"], "methods": ["POST"] }, r"/static/*": { "origins": "*", # 静态资源可以放宽限制 "methods": ["GET"] } })

配置项解释：

• origins: 允许访问的来源列表，强烈建议使用具体域名而不是通配符
• methods: 允许的HTTP方法，超分服务通常只需要POST
• allow_headers: 允许的请求头，确保包含你的前端实际使用的头
• max_age: 浏览器缓存预检请求结果的时间，减少重复预检

3.4 手动设置CORS头（不使用扩展）

如果你不想引入额外的依赖，也可以手动设置CORS头：

from flask import Flask, request, jsonify, make_response from functools import wraps app = Flask(__name__) def add_cors_headers(response): """手动添加CORS头""" response.headers['Access-Control-Allow-Origin'] = 'https://www.yourdomain.com' response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS' response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization' response.headers['Access-Control-Max-Age'] = '86400' return response @app.after_request def after_request(response): """每个请求后自动添加CORS头""" return add_cors_headers(response) @app.route('/api/enhance', methods=['POST', 'OPTIONS']) def enhance_image(): """处理OPTIONS预检请求""" if request.method == 'OPTIONS': response = make_response() response.headers['Access-Control-Allow-Origin'] = 'https://www.yourdomain.com' response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS' response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization' return response # 正常的POST处理逻辑 # ... 图片处理代码 ... return jsonify({"status": "success", "url": result_url})

4. Cache-Control配置优化

配置好CORS让服务能被正常访问后，我们再来优化性能。Cache-Control头能显著提升用户体验，特别是对于超分这种计算密集型服务。

4.1 理解缓存策略

不同的资源应该有不同的缓存策略：

1. 处理结果图片：可以长时间缓存，因为同一张图片的超分结果是固定的
2. API响应：通常不缓存或短时间缓存
3. 错误响应：不应该缓存

4.2 为超分结果配置缓存

这是最能提升性能的配置。一旦某张图片被处理过，后续请求直接返回缓存结果：

import os from datetime import datetime, timedelta from flask import send_file, make_response @app.route('/api/enhance', methods=['POST']) def enhance_image(): # ... 图片处理逻辑 ... # 生成处理后的图片文件路径 input_hash = generate_file_hash(uploaded_file) output_path = f"/cache/{input_hash}_enhanced.png" # 检查是否有缓存 if os.path.exists(output_path): # 有缓存，直接返回 response = make_response(send_file(output_path, mimetype='image/png')) else: # 第一次处理，执行超分 enhanced_image = sr.enhance(uploaded_file) enhanced_image.save(output_path) response = make_response(send_file(output_path, mimetype='image/png')) # 设置缓存头 - 缓存30天 cache_time = 30 * 24 * 60 * 60 # 30天，单位秒 response.headers['Cache-Control'] = f'public, max-age={cache_time}, immutable' response.headers['Expires'] = (datetime.utcnow() + timedelta(seconds=cache_time)).strftime('%a, %d %b %Y %H:%M:%S GMT') # 添加ETag用于缓存验证 import hashlib with open(output_path, 'rb') as f: etag = hashlib.md5(f.read()).hexdigest() response.headers['ETag'] = etag return response

Cache-Control指令解释：

• public: 允许所有缓存（CDN、浏览器等）存储响应
• max-age=2592000: 缓存有效期30天（单位秒）
• immutable: 告诉浏览器这个资源在有效期内不会改变，跳过重新验证

4.3 分层缓存策略

在实际应用中，我们可以根据不同的场景采用不同的缓存策略：

def get_cache_headers(resource_type, content_hash=None): """根据资源类型返回合适的缓存头""" cache_configs = { 'enhanced_image': { 'cache_control': 'public, max-age=2592000, immutable', # 30天 'vary': 'Content-Type' }, 'api_response': { 'cache_control': 'no-cache', # 每次都要验证 'vary': 'Authorization, Accept' }, 'error_response': { 'cache_control': 'no-store, must-revalidate', # 不缓存 'vary': '*' }, 'static_file': { 'cache_control': 'public, max-age=604800', # 7天 'vary': 'Accept-Encoding' } } config = cache_configs.get(resource_type, cache_configs['api_response']) headers = { 'Cache-Control': config['cache_control'], 'Vary': config['vary'] } if content_hash and resource_type == 'enhanced_image': headers['ETag'] = f'"{content_hash}"' return headers # 在视图函数中使用 @app.route('/api/enhance', methods=['POST']) def enhance_image(): try: # ... 处理逻辑 ... headers = get_cache_headers('enhanced_image', image_hash) response = make_response(send_file(output_path)) response.headers.update(headers) return response except Exception as e: # 错误响应不缓存 response = jsonify({"error": str(e)}) response.headers.update(get_cache_headers('error_response')) return response, 500

4.4 处理缓存验证

当缓存过期时，浏览器会发送验证请求。我们需要正确处理这些请求：

@app.route('/cache/<filename>', methods=['GET', 'HEAD']) def get_cached_image(filename): """获取缓存的图片，支持缓存验证""" filepath = os.path.join('/cache', filename) if not os.path.exists(filepath): return jsonify({"error": "Not found"}), 404 # 检查If-None-Match头（ETag验证） if_none_match = request.headers.get('If-None-Match') if if_none_match: # 计算当前文件的ETag import hashlib with open(filepath, 'rb') as f: current_etag = hashlib.md5(f.read()).hexdigest() # 如果ETag匹配，返回304 Not Modified if if_none_match.strip('"') == current_etag: response = make_response('', 304) response.headers['Cache-Control'] = 'public, max-age=2592000, immutable' return response # 正常返回文件 response = make_response(send_file(filepath)) response.headers['Cache-Control'] = 'public, max-age=2592000, immutable' # 设置ETag import hashlib with open(filepath, 'rb') as f: etag = hashlib.md5(f.read()).hexdigest() response.headers['ETag'] = f'"{etag}"' return response

5. 完整配置示例与最佳实践

现在我们把所有配置整合起来，看看一个生产就绪的Super Resolution服务应该是什么样子。

5.1 完整app.py示例

""" Super Resolution服务 - 完整配置版 包含CORS、缓存、错误处理等生产级配置 """ import os import hashlib from datetime import datetime, timedelta from functools import wraps from flask import Flask, request, jsonify, send_file, make_response from flask_cors import CORS from werkzeug.utils import secure_filename import cv2 import numpy as np from PIL import Image import io # 初始化Flask应用 app = Flask(__name__) app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 限制上传16MB # CORS配置 - 生产环境 cors = CORS(app, resources={ r"/api/*": { "origins": ["https://www.yourdomain.com", "https://app.yourdomain.com"], "methods": ["POST", "GET", "OPTIONS"], "allow_headers": ["Content-Type", "Authorization", "X-Request-ID"], "expose_headers": ["X-Process-Time", "X-Cache-Hit"], "max_age": 86400 } }) # 确保缓存目录存在 CACHE_DIR = "/cache" os.makedirs(CACHE_DIR, exist_ok=True) class SuperResolution: """超分辨率处理类""" def __init__(self): # 加载EDSR模型 - 从持久化存储加载 model_path = "/root/models/EDSR_x3.pb" self.model = cv2.dnn_superres.DnnSuperResImpl_create() self.model.readModel(model_path) self.model.setModel("edsr", 3) def enhance(self, image_data): """增强图片质量""" # 将图片数据转换为OpenCV格式 nparr = np.frombuffer(image_data, np.uint8) img = cv2.imdecode(nparr, cv2.IMREAD_COLOR) # 执行超分辨率 result = self.model.upsample(img) # 转换回PIL格式 result_rgb = cv2.cvtColor(result, cv2.COLOR_BGR2RGB) enhanced_image = Image.fromarray(result_rgb) return enhanced_image # 初始化超分处理器 sr = SuperResolution() def generate_file_hash(file_data): """生成文件哈希，用于缓存键""" return hashlib.md5(file_data).hexdigest() def get_cache_headers(cache_key, resource_type='enhanced_image'): """获取缓存头配置""" headers = {} if resource_type == 'enhanced_image': # 图片资源缓存30天 headers['Cache-Control'] = 'public, max-age=2592000, immutable' headers['ETag'] = f'"{cache_key}"' headers['X-Cache-Hint'] = 'long-term' elif resource_type == 'api_response': # API响应缓存5分钟 headers['Cache-Control'] = 'public, max-age=300' headers['Vary'] = 'Authorization, Accept' else: # 默认不缓存 headers['Cache-Control'] = 'no-store, must-revalidate' return headers @app.route('/api/health', methods=['GET']) def health_check(): """健康检查端点""" response = jsonify({ "status": "healthy", "service": "super-resolution", "timestamp": datetime.utcnow().isoformat() }) response.headers.update(get_cache_headers('health', 'api_response')) return response @app.route('/api/enhance', methods=['POST', 'OPTIONS']) def enhance_image(): """图片增强主端点""" # 处理OPTIONS预检请求 if request.method == 'OPTIONS': response = make_response() response.headers['Access-Control-Allow-Origin'] = 'https://www.yourdomain.com' response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS' response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization' return response # 记录开始时间 start_time = datetime.utcnow() # 检查上传文件 if 'image' not in request.files: return jsonify({"error": "No image file provided"}), 400 file = request.files['image'] if file.filename == '': return jsonify({"error": "No selected file"}), 400 # 读取文件数据 file_data = file.read() file_hash = generate_file_hash(file_data) # 检查缓存 cache_path = os.path.join(CACHE_DIR, f"{file_hash}.png") cache_hit = os.path.exists(cache_path) if cache_hit: # 缓存命中，直接返回 process_time = (datetime.utcnow() - start_time).total_seconds() response = make_response(send_file(cache_path, mimetype='image/png')) response.headers['X-Cache-Hit'] = 'true' response.headers['X-Process-Time'] = str(process_time) response.headers.update(get_cache_headers(file_hash, 'enhanced_image')) return response try: # 缓存未命中，执行超分处理 enhanced = sr.enhance(file_data) # 保存到缓存 enhanced.save(cache_path, 'PNG', optimize=True) # 准备响应 process_time = (datetime.utcnow() - start_time).total_seconds() # 返回文件流 img_io = io.BytesIO() enhanced.save(img_io, 'PNG', optimize=True) img_io.seek(0) response = make_response(send_file( img_io, mimetype='image/png', as_attachment=False, download_name='enhanced.png' )) # 添加响应头 response.headers['X-Cache-Hit'] = 'false' response.headers['X-Process-Time'] = str(process_time) response.headers.update(get_cache_headers(file_hash, 'enhanced_image')) return response except Exception as e: # 错误处理 app.logger.error(f"Enhancement failed: {str(e)}") error_response = jsonify({ "error": "Processing failed", "message": str(e), "timestamp": datetime.utcnow().isoformat() }) error_response.headers['Cache-Control'] = 'no-store, must-revalidate' return error_response, 500 @app.route('/api/stats', methods=['GET']) def get_stats(): """获取服务统计信息""" cache_files = os.listdir(CACHE_DIR) if os.path.exists(CACHE_DIR) else [] stats = { "cache_size": len(cache_files), "cache_dir": CACHE_DIR, "model_loaded": True, "service_uptime": "TODO", # 实际部署时可以添加启动时间记录 "timestamp": datetime.utcnow().isoformat() } response = jsonify(stats) response.headers.update(get_cache_headers('stats', 'api_response')) return response if __name__ == '__main__': # 生产环境建议使用Gunicorn等WSGI服务器 app.run( host='0.0.0.0', port=7860, debug=False # 生产环境设为False )

5.2 配套的Nginx配置（可选但推荐）

如果你在前面使用了Nginx作为反向代理，这里是一个推荐的配置：

# nginx.conf 部分配置 server { listen 80; server_name ai.yourdomain.com; # 重定向到HTTPS return 301 https://$server_name$request_uri; } server { listen 443 ssl http2; server_name ai.yourdomain.com; # SSL证书配置 ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; # SSL优化配置 ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512; ssl_prefer_server_ciphers off; # 静态文件缓存配置 location ~* \.(png|jpg|jpeg|gif)$ { expires 30d; add_header Cache-Control "public, immutable"; add_header Access-Control-Allow-Origin "https://www.yourdomain.com"; add_header Access-Control-Allow-Methods "GET, OPTIONS"; # 代理到Flask应用 proxy_pass http://localhost:7860; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # API端点配置 location /api/ { # 设置超时 proxy_read_timeout 300s; proxy_connect_timeout 75s; # 传递必要的头 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 代理到Flask proxy_pass http://localhost:7860; # CORS头 - Nginx层面也可以设置 add_header Access-Control-Allow-Origin "https://www.yourdomain.com" always; add_header Access-Control-Allow-Methods "POST, GET, OPTIONS" always; add_header Access-Control-Allow-Headers "Content-Type, Authorization" always; add_header Access-Control-Max-Age "86400" always; } # 健康检查端点 location /health { access_log off; proxy_pass http://localhost:7860/api/health; } }

5.3 部署和测试脚本

创建一个简单的部署测试脚本：

#!/bin/bash # deploy_test.sh echo "=== Super Resolution服务部署测试 ===" # 1. 检查服务是否运行 echo "1. 检查服务状态..." curl -f http://localhost:7860/api/health || { echo "服务未运行，正在启动..." # 启动服务的命令，根据你的实际部署方式调整 # nohup python app.py > app.log 2>&1 & sleep 5 } # 2. 测试CORS配置 echo -e "\n2. 测试CORS配置..." curl -X OPTIONS http://localhost:7860/api/enhance \ -H "Origin: https://www.yourdomain.com" \ -H "Access-Control-Request-Method: POST" \ -H "Access-Control-Request-Headers: Content-Type" \ -v # 3. 测试图片处理 echo -e "\n3. 测试图片处理功能..." if [ -f "test_image.jpg" ]; then curl -X POST http://localhost:7860/api/enhance \ -H "Origin: https://www.yourdomain.com" \ -H "Content-Type: multipart/form-data" \ -F "image=@test_image.jpg" \ --output enhanced_result.png \ -w "\nHTTP状态码: %{http_code}\n耗时: %{time_total}秒\n" echo "处理完成，输出文件: enhanced_result.png" else echo "测试图片不存在，跳过处理测试" fi # 4. 测试缓存头 echo -e "\n4. 检查缓存头..." if [ -f "enhanced_result.png" ]; then curl -I http://localhost:7860/api/enhance 2>/dev/null | grep -i "cache-control\|etag\|expires" fi echo -e "\n=== 测试完成 ==="

6. 常见问题与解决方案

在实际部署中，你可能会遇到一些问题。这里整理了一些常见问题及其解决方法。

6.1 CORS相关问题

问题1：浏览器控制台显示CORS错误

Access to fetch at 'https://ai.yoursite.com/api/enhance' from origin 'https://www.yoursite.com' has been blocked by CORS policy

解决方案：

• 检查Access-Control-Allow-Origin头是否包含你的前端域名
• 确保响应中包含正确的Access-Control-Allow-Methods头
• 对于复杂请求（如带自定义头的POST），需要正确处理OPTIONS预检请求

问题2：预检请求失败

Response to preflight request doesn't pass access control check

解决方案：

• 确保OPTIONS请求返回正确的CORS头
• 检查Access-Control-Allow-Headers是否包含前端实际发送的请求头
• 设置合适的Access-Control-Max-Age减少预检请求频率

6.2 缓存相关问题

问题1：图片更新后浏览器仍然显示旧版本

解决方案：

• 检查Cache-Control头是否设置正确
• 确保更新后的资源有新的URL或不同的查询参数
• 使用immutable属性告诉浏览器资源不会改变

问题2：缓存占用磁盘空间过大

解决方案：

# 添加缓存清理机制 import os import time def cleanup_old_cache(max_age_days=30, max_size_mb=1024): """清理旧缓存文件""" cache_dir = "/cache" now = time.time() max_age_seconds = max_age_days * 24 * 60 * 60 # 按时间清理 for filename in os.listdir(cache_dir): filepath = os.path.join(cache_dir, filename) if os.path.isfile(filepath): file_age = now - os.path.getmtime(filepath) if file_age > max_age_seconds: os.remove(filepath) print(f"Removed old cache: {filename}") # 按大小清理（如果需要） total_size = sum(os.path.getsize(f) for f in os.listdir(cache_dir) if os.path.isfile(os.path.join(cache_dir, f))) if total_size > max_size_mb * 1024 * 1024: # 按最后访问时间排序，删除最旧的 files = [(f, os.path.getatime(os.path.join(cache_dir, f))) for f in os.listdir(cache_dir)] files.sort(key=lambda x: x[1]) for filename, _ in files: if total_size <= max_size_mb * 1024 * 1024: break filepath = os.path.join(cache_dir, filename) total_size -= os.path.getsize(filepath) os.remove(filepath) # 可以设置定时任务执行清理 # 例如使用cron：0 2 * * * python /app/cleanup_cache.py

6.3 性能优化建议

1. 使用CDN加速：将处理后的图片推送到CDN，全球用户都能快速访问
2. 启用Gzip压缩：减少传输数据量
3. 连接复用：使用HTTP/2或HTTP/3减少连接开销
4. 监控和日志：记录缓存命中率、处理时间等关键指标

# 简单的监控中间件 @app.before_request def before_request(): request.start_time = datetime.utcnow() @app.after_request def after_request(response): # 记录处理时间 if hasattr(request, 'start_time'): process_time = (datetime.utcnow() - request.start_time).total_seconds() response.headers['X-Process-Time'] = str(process_time) # 记录到日志 app.logger.info( f"{request.method} {request.path} - " f"Status: {response.status_code} - " f"Time: {process_time if 'process_time' in locals() else 'N/A'}s" ) return response

7. 总结

配置好CORS和Cache-Control是Super Resolution服务从"能用"到"好用"的关键一步。通过今天的教程，你应该掌握了：

1. CORS配置的核心原理：如何安全地允许跨域请求
2. 缓存策略的设计：根据不同资源类型设置合适的缓存时间
3. 生产级配置示例：完整的Flask应用配置，包含错误处理和监控
4. 常见问题解决：遇到问题时的排查思路和解决方案

记住几个关键点：

• 安全第一：生产环境不要使用origins: "*"
• 性能优先：合理利用缓存，减少重复计算
• 监控到位：记录关键指标，及时发现问题

现在你的Super Resolution服务已经具备了生产部署的条件。用户可以在你的网站上无缝使用AI画质增强功能，享受快速、稳定的超分服务。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。