Flask 跨域问题

在本文中，我们将介绍Flask与AngularJS之间的跨域问题，并提供解决方案。

阅读更多：Flask 教程

什么是跨域问题？

跨域问题发生在使用不同的域或端口进行通信时。由于浏览器的安全策略限制，JavaScript在一个源（origin）中发出的HTTP请求不能直接访问另一个源中的资源。在Web开发中，前端框架（如AngularJS）和后端框架（如Flask）通常运行在不同的源中，因此会遇到跨域问题。

为什么Flask与AngularJS之间会有跨域问题？

跨域问题的根本原因是浏览器的同源策略，它限制了JavaScript对不同源资源的访问。同源策略要求协议、域名和端口号都相同才能进行通信。在Flask与AngularJS之间，由于运行在不同的域或端口中，无法直接进行跨域通信。

解决Flask跨域问题的方法

方法一：使用Flask-CORS插件

Flask-CORS是一个Flask的插件，可以用来处理跨域问题。它提供了一个装饰器@cross_origin，可以在Flask视图函数中进行使用。以下是一个使用Flask-CORS解决跨域问题的示例：

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

app = Flask(__name__)
CORS(app)

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

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

在上面的示例中，@cross_origin()装饰器指示Flask视图函数允许跨域访问。并且在应用程序实例中添加了CORS中间件，将允许来自任何源的跨域请求。使用Flask-CORS插件后，Flask应用将允许通过AngularJS从不同的域或端口中获取数据。

方法二：通过自定义响应头处理跨域

另一种解决Flask跨域问题的方法是通过自定义响应头来处理。通过在Flask应用中设置响应头，可以允许特定源的跨域请求。以下是一个示例代码：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {"name": "John", "age": 30}
    response = jsonify(data)
    response.headers.add('Access-Control-Allow-Origin', 'http://localhost:4200')
    return response

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

在上述示例中，response.headers.add('Access-Control-Allow-Origin', 'http://localhost:4200')设置了允许来自http://localhost:4200这个源的跨域请求。通过设置自定义响应头，可以在Flask应用中允许特定源的跨域请求。