Flask跨域请求处理教程：使用Flask-CORS扩展

欢迎来到Flask学习教程！今天，我们将深入探讨如何用Flask处理跨域请求，这对于现代Web应用至关重要。跨域请求通常指浏览器中JavaScript从一个域名请求另一个域名的资源，如API调用。为了安全起见，浏览器默认限制这种请求，但我们可以通过CORS（跨源资源共享）机制来允许它。Flask-CORS是一个强大的扩展，简化了这一过程。本教程将一步步引导您完成安装、配置和设置规则，确保内容简单易懂，适合初学者。

1. 跨域请求简介

在Web开发中，跨域请求是常见场景。例如，如果您的前端应用部署在https://frontend.com，后端API在https://api.example.com，浏览器会因安全策略阻止请求，除非服务器明确允许。CORS是一种标准，允许服务器指定哪些域名可以访问其资源。在Flask中，我们可以使用Flask-CORS扩展轻松实现CORS支持。

2. 安装Flask-CORS扩展

首先，确保您已安装Python和Flask。然后，通过pip安装Flask-CORS。打开命令行工具，运行以下命令：

pip install flask-cors

安装完成后，可以通过Python验证：

import flask_cors
print(flask_cors.__version__)

如果输出版本号，说明安装成功。

3. 基础配置Flask-CORS

现在，让我们在Flask应用中配置CORS。创建一个简单的Flask应用文件，例如app.py。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 基础配置：允许所有跨域请求（谨慎使用，仅用于开发）
CORS(app)

@app.route('/api/data', methods=['GET'])
def get_data():
    return {'message': 'Hello, CORS is enabled!'}

if __name__ == '__main__':
    app.run(debug=True)

在这个示例中，我们导入了Flask和Flask-CORS，然后使用CORS(app)来启用CORS。这允许任何域名访问所有路由，但实际应用中应该更精确地控制。

4. 跨域规则设置：允许域名和请求方法

4.1 允许特定域名

为了提高安全性，您可以指定允许访问的域名。修改配置如下：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 允许特定域名
cors = CORS(app, resources={r'/api/*': {'origins': 'https://frontend.com'}})

@app.route('/api/data', methods=['GET'])
def get_data():
    return {'message': 'Only allowed from https://frontend.com'}

if __name__ == '__main__':
    app.run(debug=True)

在resources参数中，我们使用字典来指定哪个路由允许哪个域名。这里，/api/*路径下的所有路由只允许https://frontend.com域名访问。您也可以设置多个域名：{'origins': ['https://frontend.com', 'https://another.com']}。

4.2 允许所有域名（不推荐用于生产）

如果开发时需要，可以允许所有域名，但这样做会降低安全性：

CORS(app, resources={r'/*': {'origins': '*'}})

4.3 设置允许的请求方法

默认情况下，CORS允许GET、POST、HEAD等常见方法。您可以自定义允许的方法。例如：

cors = CORS(app, resources={
    r'/api/data': {
        'origins': 'https://frontend.com',
        'methods': ['GET', 'POST', 'OPTIONS']  # 指定允许的方法
    }
})

这样，/api/data路由只接受GET、POST和OPTIONS请求。OPTIONS方法通常用于CORS预检请求，浏览器会自动发送。

4.4 其他配置选项

Flask-CORS还支持更多选项，如设置头信息、证书等。完整列表可参考官方文档。常见选项：

• supports_credentials: 允许携带Cookie。
• allow_headers: 允许的自定义头。

示例：

cors = CORS(app, resources={
    r'/api/*': {
        'origins': 'https://frontend.com',
        'methods': ['GET', 'POST'],
        'supports_credentials': True  # 允许带Cookie的请求
    }
})

5. 完整示例：一个简单的Flask应用

结合以上内容，这里是一个完整的示例应用：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# 配置CORS：允许https://frontend.com访问/api/*路径的GET和POST方法
cors = CORS(app, resources={
    r'/api/*': {
        'origins': 'https://frontend.com',
        'methods': ['GET', 'POST']
    }
})

@app.route('/api/users', methods=['GET'])
def get_users():
    users = [{'id': 1, 'name': 'Alice'}, {'id': 2, 'name': 'Bob'}]
    return jsonify(users)

@app.route('/api/users', methods=['POST'])
def add_user():
    # 添加用户逻辑（示例）
    return jsonify({'message': 'User added'}), 201

if __name__ == '__main__':
    app.run(debug=True, port=5000)

运行此应用后，只有来自https://frontend.com的请求才能访问/api/users路径，并且只允许GET和POST方法。

6. 注意事项和最佳实践

• 安全性：在生产环境中，尽量避免使用'origins': '*'，因为它允许任何域名访问，可能导致安全漏洞。
• 测试：使用浏览器开发者工具或Postman等工具测试CORS配置，确保跨域请求正常工作。
• 更新配置：如果前端域名变化，及时更新CORS配置。
• 监控：在生产中监控CORS相关的日志，以便及时发现异常请求。

7. 总结

通过本教程，您学会了如何在Flask中使用Flask-CORS扩展处理跨域请求。我们从安装扩展开始，讲解了基础配置和高级规则设置，如允许特定域名和请求方法。记住，合理的CORS配置能提升应用的安全性。现在，您可以尝试在自己的Flask项目中应用这些知识了。如果有更多问题，参考Flask-CORS官方文档或Flask社区。祝学习愉快！