Flask解决接口跨域问题

在前端开发中，接口跨域问题是一个常见的问题。由于浏览器的同源策略，不同域的网页无法直接访问其他域的资源。在Flask应用中，如果前端和后端部署在不同的域或端口上，就会遇到接口跨域问题。为了解决这个问题，我们可以使用Flask的扩展或手动设置响应头来允许跨域请求。
方法一：使用Flask-CORS扩展
Flask-CORS是一个用于处理跨域请求的Flask扩展。它允许你在Flask应用中轻松地设置CORS（跨来源资源共享）策略。

1. 安装Flask-CORS扩展
   使用pip安装Flask-CORS扩展：

   pip install flask-cors

2. 在Flask应用中导入并配置CORS
   在需要使用CORS的视图函数或整个应用中导入CORS：

   from flask import Flask, jsonify
   from flask_cors import CORS
   app = Flask(__name__)
   CORS(app)  # 配置整个应用的CORS

   或者，只在需要使用CORS的视图函数中导入CORS：

   from flask import Flask, jsonify, request, Response
   from flask_cors import CORS
   app = Flask(__name__)
   CORS(app)  # 配置整个应用的CORS
   @app.route('/example', methods=['GET'])
   def example():
   response = jsonify({'message': 'Hello, World!'})  # 返回JSON响应
   response.headers.add('Access-Control-Allow-Origin', '*')  # 允许所有域的请求
   response.headers.add('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')  # 允许的请求方法
   response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')  # 允许的请求头
   return response

   在上面的示例中，我们使用了Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers响应头来允许跨域请求。其中，Access-Control-Allow-Origin设置为*表示允许所有域的请求，也可以设置为具体的域名。Access-Control-Allow-Methods和Access-Control-Allow-Headers分别指定了允许的请求方法和请求头。
3. 运行Flask应用
   启动Flask应用并确保前端和后端部署在不同的域或端口上，然后进行跨域请求测试。如果一切配置正确，浏览器将不再报错，接口可以正常访问。
   方法二：手动设置响应头
   除了使用扩展外，还可以手动设置响应头来解决跨域问题。以下是一个简单的示例：
4. 在视图函数中返回JSON响应时，手动设置响应头：

   from flask import Flask, jsonify, request, Response
   app = Flask(__name__)
   @app.route('/example', methods=['GET'])
   def example():
   response = jsonify({'message': 'Hello, World!'})  # 返回JSON响应
   response.headers['Access-Control-Allow-Origin'] = '*'  # 允许所有域的请求
   response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'  # 允许的请求方法
   response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'  # 允许的请求头
   return response