Python中使用flask_cors模块实现AJAX跨域请求

发布时间：2023-12-27 06:29:16

在Python中使用Flask框架和flask_cors模块可以轻松实现AJAX跨域请求。跨域请求是指在一个域名下的网页向另一个域名的服务器发送AJAX请求。这种情况下，浏览器会进行同源策略检查，如果请求的目标地址与当前域名不同，浏览器会阻止请求的发送。

为了解决跨域请求的问题，可以使用flask_cors模块来处理。该模块可以在Flask应用中，为特定的路由或整个应用启用跨域请求。

安装flask_cors模块：

pip install flask_cors

下面是一个使用flask_cors模块实现AJAX跨域请求的例子：

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

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

在上面的例子中，首先 import 了 Flak、jsonify 和 request 类，还有 flask_cors 模块。然后创建了一个 Flask 应用，然后启用了 CORS。在路由函数 /api 中，返回了一个 JSON 格式的数据。

接下来，在前端创建一个 HTML 页面，使用 AJAX 发送跨域请求来获取上述 Flask 接口的数据：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Cross-Domain Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'http://localhost:5000/api',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
    </script>
</head>
<body>
</body>
</html>

在上面的 HTML 页面中，首先引入了 jQuery 库，然后使用 WjQuery 的 AJAX 方法发送 GET 请求。在请求的 success 回调函数中，打印了返回的数据。

在运行 Flask 应用之后打开该 HTML 页面，可以在浏览器的开发者工具中看到返回的数据。

总结：

以上就是使用 flask_cors 模块实现 AJAX 跨域请求的基本步骤和示例代码。通过在 Flask 应用中启用 CORS，就可以轻松地处理跨域请求。同时，在前端通过 AJAX 发送跨域请求时，也需要在请求的头部添加相关的 CORS HTTP 头部字段，以便服务器处理请求。