Flask 中的跨域难题：定义、影响与解决方案深度解析

原创

lww爱学习 2023-12-22 06:59:09 ©著作权

文章标签 python 后端 flask Access 跨域请求 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者lww爱学习的原创作品，请联系作者获取转载授权，否则将追究法律责任

跨域（Cross-Origin）是指在浏览器中，一个页面的脚本试图访问另一个页面的内容时发生的安全限制。Flask 作为一种 Web 应用框架，也涉及到跨域问题。本文将详细介绍跨域的定义、影响以及解决方案，涵盖如何在 Flask 中处理跨域问题。

1. 跨域的定义与作用

跨域是指浏览器的同源策略（Same-Origin Policy）所施加的安全限制。当一个页面的脚本试图通过 XMLHttpRequest 或 Fetch API 等方式请求其他域名下的资源时，浏览器会阻止这种行为。这种安全策略有助于防止恶意网站获取用户的敏感数据，但也限制了网站间数据交换的自由性。

在处理跨域请求时，可以通过设置响应头的特定参数来允许或限制跨域访问。以下是常用的跨域请求响应头参数：

1.1. Access-Control-Allow-Origin

作用： 指定允许访问该资源的域名。可以设置为特定域名、*（允许所有域名访问），或多个域名列表。
示例： Access-Control-Allow-Origin: http://example.com

1.2. Access-Control-Allow-Methods

作用： 指定允许的 HTTP 请求方法。常见方法包括 GET、POST、PUT、DELETE 等。
示例： Access-Control-Allow-Methods: GET, POST, PUT

1.3. Access-Control-Allow-Headers

作用： 指定允许的自定义请求头，用于 AJAX 请求中使用非简单请求头。
示例： Access-Control-Allow-Headers: Content-Type, Authorization

1.4. Access-Control-Allow-Credentials

作用： 指定是否允许发送 Cookie 等凭据信息。如果设置为 true，则表示允许发送凭据。
示例： Access-Control-Allow-Credentials: true

1.5. Access-Control-Expose-Headers

作用： 指定哪些响应头暴露给前端 JavaScript 代码，允许 JavaScript 访问。
示例： Access-Control-Expose-Headers: Authorization

1.6. Access-Control-Max-Age

作用： 指定预检请求的有效期，即在该时间段内不会再发送预检请求。
示例： Access-Control-Max-Age: 86400

这些响应头参数可以在服务器端进行设置，用于控制和限制跨域请求的行为。根据具体需求，可以设置合适的响应头参数来实现对跨域请求的管理和控制。

2. 跨域问题的解决方案 CORS（Cross-Origin Resource Sharing）

CORS 是一种机制，允许服务器在响应中设置 HTTP 头来允许跨域请求。

在 Flask 中，解决跨域问题有多种方式，其中常见的包括以下几种：

2.1. 使用 Flask-CORS 扩展

Flask-CORS 是处理跨域资源共享（CORS）的官方扩展，提供了简单而强大的方式来处理跨域请求。

安装 Flask-CORS：

pip install flask-cors

启用 CORS：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

自定义 CORS 设置：

from flask import Flask
from flask_cors import CORS

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

2.2. 手动处理跨域请求

自定义响应头：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {'message': 'Hello, CORS!'}
    response = jsonify(data)
    response.headers.add('Access-Control-Allow-Origin', '*')  # 允许所有域名访问，可自定义
    return response

2.3. 使用装饰器处理跨域请求

自定义装饰器：

from flask import Flask, jsonify

app = Flask(__name__)

def allow_cors(func):
    def wrapper(*args, **kwargs):
        response = func(*args, **kwargs)
        response.headers.add('Access-Control-Allow-Origin', '*')  # 允许所有域名访问，可自定义
        return response
    return wrapper

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

这些方法提供了灵活的方式来处理跨域请求，可以根据具体需求选择最适合的方式来解决跨域问题。Flask-CORS 扩展提供了一种更加简单和集成化的解决方案，而手动处理跨域请求则更灵活，可以根据特定需求自定义响应头或装饰器来实现跨域。

3. Flask 跨域的具体应用

示例代码 1：使用 Flask 处理跨域请求

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

示例代码 2：使用自定义 CORS 设置

from flask import Flask, jsonify
from flask_cors import CORS

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

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