08-Flask中实现跨域请求

为什么需要支持跨域

浏览器的同源策略（Same-Origin Policy）限制了跨域请求，如果不进行特殊处理，跨域请求将被浏览器拦截。

场景注意出现在前后的分离项目、第三方API等场景，接口支持跨域能够允许浏览器跨域请求不被浏览器拦截，让前端应用能够安全地请求不同域的资源，绕过浏览器的同源策略限制。

Flask实现跨域请求

flask-cors的文档：https://flask-cors.readthedocs.io/

1）安装flask-cors扩展来支持跨域请求

pip install flask-cors -i https://pypi.tuna.tsinghua.edu.cn/simple/

2）在Flask应用中全局跨域

from flask import Flask, jsonify
from flask_cors import CORS  # 导入CORS

app = Flask(__name__)
CORS(app)  # 为整个应用开启跨域支持

@app.route('/example', methods=['GET'])
def example_route():
    response = {
        "message": "This is a cross-origin enabled response!"
    }
    return jsonify(response)

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

扩展：默认情况下，CORS扩展将允许所有的跨域请求，但也可以通过配置选项来限制允许的来源、方法等。

配置特定的跨域设置，例如仅允许来自 http://localhost:3000 的请求

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

3）在Flask应用中单个接口设置跨域

如果只想给其中某个接口设置跨域，而不是整个应用都支持跨域，可以使用CORS扩展的cross_origin装饰器来实现

from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)

@app.route('/api/some_endpoint')
@cross_origin()
def some_endpoint():
    # 处理接口逻辑
    return 'Hello, World!'

扩展：也可以通过cross_origin装饰器的参数来进一步自定义跨域请求的行为。例如，你可以指定允许的来源、方法等：

@app.route('/api/some_endpoint')
@cross_origin(origins='http://example.com', methods=['GET', 'POST'])
def some_endpoint():
    # 处理接口逻辑
    return 'Hello, World!'