我使用的是Python+vue来写的，但是现在有个问题，import json # import simplejson from flask import Flask, request from flask_cors import CORS # from util.redis_poi import Redis # from util import Serializers from blueprint.main_blue_print import main_bp from blueprint.seafly_blue_print import sf_bp from config.CONFIG import openapi_pass_router, pass_router_admin from config_ import CODE from util.common import get_data from util.token_szl import check_token """ 初始化 """ app = Flask(__name__) CORS(app, resources=r'/*', supports_credentials=True) pass_router = pass_router_admin + openapi_pass_router app.register_blueprint(sf_bp) # 以下蓝图需要加解密注解 app.register_blueprint(main_bp) """ 除了oa,main,cw,dev的蓝图，其他的蓝图路由内的业务代码必要通过@encrypt_decrypt_decorator注解加密解密 """ @app.before_request def before_request(): if request.path in pass_router: if request.path in openapi_pass_router: request_data = get_data(request) if not request_data.get('access_key') or not request_data.get('encrypt'): return { "code": CODE.CODE.FAIL.RQU_PARA_MISS_ENCRY, "message": '缺少必要总参' } pass else: check = check_token(request.headers.get('token')) if not check: return { "code": CODE.CODE.FAIL.TOKEN_ERROR, "message": 'token验证失效' } @app.after_request def after_request(response): response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE,OPTION' response.headers['Access-Control-Allow-Headers'] = 'Content-Type,Authorization,Token' response.headers['Access-Control-Allow-Credentials'] = 'true' response.headers['Access-Control-Expose-Headers'] = 'token' return response if __name__ == '__main__': app.run(host='0.0.0.0', port=8878, debug=True)

<think>好的，我需要帮助用户解决Flask与Vue集成时的跨域和token校验问题。首先，我得回顾一下用户提供的引用内容，看看有哪些已有的信息可以利用。 根据引用[2]，Flask后端可以通过`CORS`扩展配置跨域，设置`supports_credentials=True`和`max_age=6000`来处理预检请求的有效期。这应该作为跨域配置的基础。然后，引用[4]提到Flask处理GET和POST请求的测试接口，可能涉及到路由的设置，但用户更关注的是跨域和token校验的结合。 接下来，token校验部分。引用[1]提到基于Token的登录状态管理，但没有具体说明实现方式。通常，Flask中可以使用装饰器来验证请求头中的token。例如，在路由前使用`@jwt_required()`或者自定义的装饰器检查`Authorization`头。需要生成token的逻辑，可能用`itsdangerous`或`PyJWT`库，这部分需要补充。 用户可能还需要在Vue前端配置Axios拦截器，以便在每个请求中添加token，这属于前端处理的部分，但用户的问题集中在Flask后端配置，所以重点应放在后端如何验证token和处理跨域。 可能的问题点包括：CORS配置是否正确，是否允许携带凭证（如cookies、Authorization头），以及预检请求（OPTIONS）的处理。根据引用[2]，设置`CORS(app, supports_credentials=True, max_age=6000)`是正确的，但可能需要更详细的参数，比如`origins`或`methods`。 另外，token校验中间件需要确保在路由处理之前执行。例如，使用`before_request`钩子，或者为需要认证的路由添加装饰器。需要避免对登录路由和OPTIONS请求进行token校验，否则会导致预检请求失败。 现在整理步骤： 1. 安装必要的库：flask-cors、itsdangerous（或PyJWT）。 2. 配置CORS，允许Vue前端的源，设置支持的methods、headers，启用supports_credentials。 3. 实现token生成和校验逻辑，比如登录接口返回token，其他接口验证token。 4. 处理OPTIONS请求，确保预检请求通过，可能需要在装饰器中排除OPTIONS方法。 5. 测试接口，确保跨域请求携带token时能通过校验，否则返回401。 需要检查是否有遗漏的配置项，例如Access-Control-Allow-Headers是否包含Authorization，以及前端是否正确发送token。同时，注意生产环境中安全设置，比如HTTPS、token过期时间等。 最后，根据用户提供的引用，特别是引用[2]和[4]，可以整合示例代码，展示完整的Flask配置和token处理逻辑，确保代码语法正确，并符合用户的中文回答要求。然后生成相关问题，如如何刷新token、处理token过期等。</think>### 配置Flask+CORS及Token校验的完整步骤 #### 一、跨域配置（基于Flask-CORS） 1. **安装依赖库** ```bash pip install flask-cors itsdangerous # itsdangerous用于生成/解析Token ``` 2. **Flask全局CORS配置** ```python from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}}, # 限制Vue前端源 supports_credentials=True, # 允许携带Cookie/Token methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"], # 允许的HTTP方法 allow_headers=["Authorization", "Content-Type"], # 允许的自定义Header max_age=6000) # 预检请求缓存时间[^2] ``` #### 二、Token校验逻辑实现 1. **生成与解析Token的工具函数** ```python from itsdangerous import TimedJSONWebSignatureSerializer as Serializer from itsdangerous import BadSignature, SignatureExpired SECRET_KEY = 'your-secret-key' # 生产环境应从配置读取 TOKEN_EXPIRE = 3600 # Token有效期1小时 def generate_token(user_id): s = Serializer(SECRET_KEY, expires_in=TOKEN_EXPIRE) return s.dumps({'user_id': user_id}).decode('utf-8') def verify_token(token): s = Serializer(SECRET_KEY) try: data = s.loads(token) return data['user_id'] except (BadSignature, SignatureExpired): return None ``` 2. **Token校验装饰器** ```python from flask import request, jsonify def token_required(f): def decorator(*args, **kwargs): token = request.headers.get('Authorization') if not token or not token.startswith('Bearer '): return jsonify(code=401, message='Token缺失'), 401 user_id = verify_token(token[7:]) # 去除"Bearer "前缀 if not user_id: return jsonify(code=401, message='Token无效或过期'), 401 return f(user_id, *args, **kwargs) return decorator ``` 3. **登录接口与受保护接口示例** ```python @app.route('/api/login', methods=['POST']) def login(): # 假设验证用户名密码通过后获取user_id user_id = 123 token = generate_token(user_id) return jsonify(code=200, token=token) @app.route('/api/protected') @token_required def protected_route(user_id): return jsonify(code=200, data=f'用户{user_id}的敏感数据') ``` #### 三、Vue前端适配要点 1. **Axios请求拦截器（添加Token）** ```javascript import axios from 'axios'; axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); ``` 2. **响应拦截器（处理401错误）** ```javascript axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // 跳转到登录页 router.push('/login'); } return Promise.reject(error); } ); ``` #### 四、验证流程 1. Vue登录后存储Token → 后续请求自动携带 2. Flask校验Token有效性 → 无效返回401 3. 预检请求（OPTIONS）自动通过CORS配置处理