Flask-CORS解决前端跨域请求问题的 实践

Flask-CORS是一个用于解决Flask应用程序中前端跨域请求问题的插件。在开发Web应用程序时，通常会遇到前端页面需要从不同的域名或端口发送请求的情况，由于安全限制，浏览器默认会阻止这些跨域请求。Flask-CORS旨在提供一种简单的方式来处理跨域请求，使开发人员能够轻松地与不同域上的资源进行交互。

以下是使用Flask-CORS的 实践及相关示例：

1. 安装Flask-CORS

首先，需要安装并导入Flask-CORS插件。可以通过如下命令在命令行中安装Flask-CORS：

   pip install -U flask-cors
   

在Flask应用程序代码中导入Flask-CORS：

   from flask import Flask, jsonify
   from flask_cors import CORS
   

2. 初始化Flask应用程序

创建一个Flask应用程序实例，并在初始化时配置CORS：

   app = Flask(__name__)
   CORS(app)
   

3. 设置允许跨域请求的源

使用CORS()构造函数的origins参数来设置允许请求的源。可以使用通配符*来允许所有源请求，或者指定允许的特定源。以下示例只允许http://example.com和http://localhost:3000两个源的请求：

   CORS(app, origins=['http://example.com', 'http://localhost:3000'])
   

4. 应用于特定路由

可以针对需要跨域请求的特定路由应用CORS插件。以下示例将CORS应用于/api路由：

   @app.route('/api')
   @cross_origin()
   def api():
       # 处理跨域请求
       return jsonify({'message': 'Hello, CORS!'})
   

5. 自定义CORS选项

可以通过传递自定义选项来设置更多CORS配置。例如，可以设置允许的HTTP方法、允许的请求标头等。以下示例将只允许GET和POST方法的请求，并允许自定义标头'X-Custom-Header'：

   cors = CORS(app, resources={r"/api/*": {"origins": "*", "methods": ["GET", "POST"], "headers": "X-Custom-Header"}})
   

Flask-CORS提供了简单的方法来解决Flask应用程序中的跨域请求问题。通过按照上述 实践设置和使用Flask-CORS，开发人员可以轻松地处理来自不同域的请求，并实现跨域资源共享的功能。