Flask Python Flask Cors 问题

在本文中，我们将介绍如何在Flask框架中解决跨域资源共享（CORS）的问题。Flask是一个轻量级的Python Web框架，用于构建Web应用程序。CORS是一种机制，它允许在Web浏览器中运行的应用程序在一个域中访问不同域中的资源。

阅读更多：Flask 教程

什么是跨域资源共享（CORS）？

跨域资源共享（CORS）是一种机制，用于在浏览器端进行跨域请求。跨域请求指的是浏览器中运行的JavaScript代码从一个域中发起请求，访问另一个域中的资源。在默认情况下，浏览器会阻止跨域请求，以确保Web应用程序的安全性。然而，有时我们需要允许跨域请求以便在不同域之间共享资源。

Flask中解决CORS问题的方法

Flask提供了一个名为”Flask-Cors”的扩展，可以很方便地解决CORS问题。下面是使用Flask-Cors扩展解决CORS问题的步骤：

首先，使用pip安装Flask-Cors扩展：

pip install Flask-Cors

然后，在Flask应用程序中导入Flask-Cors扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

最后，在需要进行跨域请求的路由函数上使用@cross_origin装饰器：

from flask import jsonify
from flask_cors import cross_origin

@app.route("/api/data")
@cross_origin()
def get_data():
    data = {"message": "这是一个跨域请求示例"}
    return jsonify(data)

上述代码中，我们使用@cross_origin装饰器将路由函数标记为允许跨域请求。同时，我们可以使用Flask提供的其他装饰器来对路由函数进行更加详细和灵活的跨域设置。

示例和说明

接下来，我们将使用一个示例来说明如何使用Flask-Cors解决CORS问题。假设我们有一个Flask应用程序，该应用程序有一个路由函数用于获取用户信息，并将用户信息以JSON格式返回给客户端。我们希望在另一个域中的Web应用程序中发起跨域请求来获取用户信息。

首先，使用以下命令安装Flask和Flask-Cors扩展：

pip install Flask
pip install Flask-Cors

然后，创建一个名为”app.py”的Python文件，并粘贴以下代码：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/api/user")
def get_user():
    user = {
        "name": "John",
        "age": 25,
        "email": "john@example.com"
    }
    return jsonify(user)

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

保存并运行以上代码。接下来，创建一个名为”index.html”的HTML文件，并粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>CORS示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="user-info"></div>
    <script>
        .ajax({
            url: "http://localhost:5000/api/user",
            dataType: "json",
            success: function(response) {
                var userInfo = response;
                var html = "姓名：" + userInfo.name + "<br>" +
                           "年龄：" + userInfo.age + "<br>" +
                           "邮箱：" + userInfo.email;("#user-info").html(html);
            }
        });
    </script>
</body>
</html>