Flask CORS 解决跨域问题|极客笔记

Flask CORS 解决跨域问题

在Web开发中，跨域是一个常见的问题。当一个Web应用程序试图与不同源的资源进行交互时，浏览器通常会阻止这种行为，以防止安全漏洞。这就是所谓的”跨域问题”。为了解决这个问题，我们可以使用CORS（Cross-Origin Resource Sharing）技术。在本文中，我将详细介绍如何使用Flask CORS库来解决跨域问题。

什么是 CORS？

CORS是一种允许浏览器跨源访问资源的机制。浏览器使用CORS来判断是否允许服务端将资源交给前端，以确保安全性。当浏览器发现请求跨域时，它会向服务端发送一个预先检查请求（preflight request），以获取服务端的许可。

为什么需要 CORS？

跨域问题是由浏览器的同源政策（Same-Origin Policy）引起的。同源政策要求浏览器只能执行与当前页面同源的脚本。但在实际开发中，我们经常需要跨域访问资源，比如从不同的域名获取数据或调用API。这时就需要使用CORS来解决这个问题。

如何使用 Flask CORS？

Flask CORS是一个Flask扩展，可以轻松地为Flask应用程序添加跨域支持。要使用Flask 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)

上面的代码中，我们首先引入了Flask和Flask CORS库，然后创建了一个Flask应用程序实例，并通过CORS(app)将CORS支持绑定到该应用程序上。这样，我们的Flask应用程序就具备了跨域支持能力。

接下来，我们可以定义一些路由，以便测试跨域请求的情况：

@app.route('/')
def index():
    return 'Hello, World!'

@app.route('/api/data')
def get_data():
    data = {'message': 'This is data from the API'}
    return jsonify(data)

在上面的代码中，我们定义了两个路由。一个是根路由，返回一个简单的字符串；另一个是/api/data，返回一个包含数据的JSON对象。接着，我们可以在前端代码中通过XHR请求来测试这些路由的跨域请求情况。

测试跨域请求

我们可以使用原生JavaScript来发起跨域请求。下面是一个简单的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:5000/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

在这个示例中，我们创建了一个XMLHttpRequest对象，并向Flask应用程序发起了一个GET请求。如果一切正常，我们就能在控制台中看到从/api/data路由返回的数据。