解决Flask中Cookie设置不生效的常见陷阱与最佳实践

# user.py (简化版，仅展示核心逻辑)
from flask import jsonify, make_response
import jwt # 假设用于生成token

SECRET_KEY = "your_secret_key" # 替换为实际的密钥

def loginAccount(email): # 假设email已获取
    # ... 用户认证逻辑 ...
    userId = "some_user_id" # 假设从数据库获取
    tokenId = jwt.encode({'userId': userId}, SECRET_KEY, algorithm='HS256')

    mensagem = {'message': f'Welcome to the CharTwo {email}!', 'tokenId': tokenId}

    # 创建一个响应对象，并尝试设置Cookie
    response = make_response(jsonify(mensagem))
    response.set_cookie('accessToken', tokenId, httponly=True, secure=True, samesite='Lax') # 示例中未包含httponly, secure, samesite

    # 错误：这里返回了jsonify(mensagem)，而不是带有Cookie的response对象
    return jsonify(mensagem)

# user.py (修正后的代码)
from flask import jsonify, make_response
import jwt # 假设用于生成token
# from flask import request # 如果需要获取请求数据，例如email

SECRET_KEY = "your_secret_key" # 替换为实际的密钥

# 假设email通过请求体传递
def loginAccount():
    # 示例：假设email从请求中获取，实际应用中需更严谨处理
    # data = request.get_json()
    # email = data.get('email')

    # ... 用户认证逻辑 ...
    userId = "some_user_id" # 假设从数据库获取
    email = "example@example.com" # 假设email已获取
    tokenId = jwt.encode({'userId': userId}, SECRET_KEY, algorithm='HS256')

    mensagem = {'message': f'Welcome to the CharTwo {email}!', 'tokenId': tokenId}

    # 正确：创建响应对象，设置Cookie，并返回该对象
    response = make_response(jsonify(mensagem))
    response.set_cookie('accessToken', tokenId, httponly=True, secure=False, samesite='Lax') # 示例中secure=False，根据部署环境调整

    return response # 返回带有Cookie的response对象

# main.py
from flask import Flask
from flask_cors import CORS
from user import loginAccount # 导入修正后的loginAccount

app = Flask(__name__)
# 确保CORS配置支持凭证，以便跨域请求可以携带和接收Cookie
CORS(app, supports_credentials=True, resources={r"/api/*": {"origins": "http://localhost:8080"}}) # 假设VueJS运行在8080端口

@app.route('/')
def principal():
    return 'Welcome to the CharTwo API.'

@app.route('/api/account/login', methods=['POST'])
# @cross_origin(supports_credentials=True) # 如果CORS在app级别配置，这里通常不需要再次声明
def login_account():
    # 实际应用中，这里需要从请求中获取email等信息传递给loginAccount
    return loginAccount()

if __name__ == '__main__':
    app.run(debug=True, port=5000) # Flask运行在5000端口

# user.py (修正后的版本)
from flask import jsonify, make_response, request # 导入request以获取请求数据
import jwt # 假设已安装 PyJWT

SECRET_KEY = "your_super_secret_key_change_this_in_production" # 强烈建议在生产环境使用更安全的密钥

def loginAccount():
    data = request.get_json()
    email = data.get('email')
    password = data.get('password')

    # 实际应用中，这里应进行数据库查询和密码验证
    # 假设验证通过
    if email == "test@example.com" and password == "password123":
        userId = "some_unique_user_id_from_db"
        # 生成JWT token
        tokenId = jwt.encode({'userId': userId}, SECRET_KEY, algorithm='HS256')

        mensagem = {'message': f'Welcome, {email}!', 'tokenId': tokenId}

        # 创建响应对象，并设置Cookie
        response = make_response(jsonify(mensagem))
        # 设置Cookie，注意httponly, secure, samesite等属性对安全性和跨域行为的影响
        # secure=True 仅在HTTPS连接下发送Cookie，开发环境可能需要设置为False
        # samesite='Lax' 或 'Strict' 用于CSRF保护
        response.set_cookie('accessToken', tokenId, httponly=True, secure=False, samesite='Lax', max_age=3600) # max_age设置过期时间

        return response # 返回带有Cookie的响应对象
    else:
        return jsonify({"erro": "Invalid credentials"}), 401

// 假设在Vue组件的某个方法中
import axios from 'axios';

const apiUrl = 'http://127.0.0.1:5000'; // Flask后端地址

export default {
  data() {
    return {
      email: 'test@example.com',
      password: 'password123',
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post(
          `${apiUrl}/api/account/login`,
          {
            email: this.email,
            password: this.password,
          },
          {
            withCredentials: true, // 关键：允许Axios发送和接收Cookie
          }
        );
        alert(response.data.message);
        console.log('登录成功，检查浏览器Cookie！', response);
        // 此时，浏览器应该已经设置了名为 'accessToken' 的Cookie
      } catch (error) {
        alert(`登录失败: ${error.response.data.erro || error.message}`);
        console.error('登录错误:', error.response || error);
      }
    },
  },
};