使用Flask-CORS实现前后端分离开发中的跨域请求

在前后端分离开发中，通常需要解决跨域请求的问题。Flask-CORS是一个用于解决Flask框架中跨域请求问题的扩展库。它提供了一种简单的方法来配置CORS（跨域资源共享）选项，允许跨域请求从指定的源进行访问。

下面是一个使用Flask-CORS实现跨域请求的例子：

首先，安装Flask-CORS库：

pip install -U flask-cors

然后，在Flask应用的主文件中引入Flask和Flask-CORS库：

from flask import Flask
from flask_cors import CORS

接着，创建一个Flask应用实例，并启用CORS：

app = Flask(__name__)
CORS(app)

在这个例子中，我们创建了一个名为app的Flask应用实例，并通过CORS(app)启用了CORS。

接下来，我们可以定义一个简单的GET路由，用于处理跨域请求：

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

在这个例子中，我们定义了一个名为get_data的路由，用于处理GET请求。在路由的处理函数中，我们创建了一个包含返回消息的字典，然后使用jsonify将其转换为JSON格式的响应。

最后，我们可以运行Flask应用：

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

这样，我们就完成了使用Flask-CORS实现跨域请求的设置。当浏览器发起跨域请求时，Flask应用将允许来自任何来源的请求访问/api/data路由，并返回JSON格式的响应。

在前端应用中，可以使用XMLHttpRequest或fetch等技术发起跨域请求。以下是一个使用JavaScript的fetch方法请求跨域资源的例子：

fetch('http://localhost:5000/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

在这个例子中，我们使用fetch方法发送GET请求到http://localhost:5000/api/data地址，并将响应转换为JSON格式。最后，我们将响应数据打印到控制台。

使用Flask-CORS可以轻松地实现前后端分离开发中的跨域请求。它提供了一种简单的方法来配置CORS选项，允许跨域请求从指定的源进行访问。这样，我们可以在前端应用中方便地发送跨域请求，并从后端应用接收响应数据。