如何使用Flask-CORS实现前后端跨域通信

发布时间：2023-12-24 14:48:42

Flask-CORS是一个用于解决Flask框架中跨域通信问题的扩展库。在默认情况下，浏览器会阻止跨域请求，从而导致前后端无法进行数据交互。Flask-CORS通过在Flask应用中添加CORS（跨域资源共享）标头，来允许跨域请求的发送和接收。

下面将演示如何使用Flask-CORS实现前后端跨域通信，并提供一个简单的使用例子。

首先，确保已安装Flask和Flask-CORS扩展库。可以使用以下命令进行安装：

pip install flask
pip install flask-cors

在Flask应用中添加CORS支持，需要在应用创建时初始化CORS扩展，并配置允许跨域请求的来源。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

在上面的示例中，CORS(app, resources={r"/*": {"origins": "*"}})初始化了CORS扩展，并配置了允许所有来源的跨域请求。

接下来，可以使用Flask的路由装饰器定义API接口，并在处理函数中返回跨域请求的响应。

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {'name': 'John', 'age': 30}
    return jsonify(data)

在上述示例中，我们定义了一个GET请求处理函数get_data()，该函数返回一个名为data的字典。使用jsonify()函数将字典转换为JSON格式的响应。

最后，运行Flask应用程序。

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

现在，已经准备好了一个简单的Flask应用程序，支持前后端跨域通信。下面是如何使用该应用程序的前端示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Flask-CORS Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 发送GET请求到Flask API接口
        axios.get('http://localhost:5000/api/data')
            .then(function (response) {
                // 打印API返回的数据
                console.log(response.data);
                // 在页面上显示API返回的数据
                document.getElementById('root').innerText = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
    </script>
</body>
</html>

在上述示例中，我们使用axios库发送GET请求到Flask API接口，并在获取到响应后，将其打印到浏览器的控制台，并在页面上显示。

需要注意的是，浏览器可能会阻止跨域访问。根据浏览器的不同，可能需要在客户端代码中进行一些配置。可以在Flask应用中添加CORS支持来解决此问题。

以上就是使用Flask-CORS实现前后端跨域通信的示例，通过配置CORS支持，可以让前后端实现数据交互。