Flask跨域Cookie设置：确保前端正确接收的实践指南-Python教程-PHP中文网

Flask跨域Cookie设置：确保前端正确接收的实践指南

碧海醫心

发布： 2025-09-14 13:34:13

原创

706人浏览过

Flask跨域Cookie设置：确保前端正确接收的实践指南

本教程详细探讨了在Flask后端与VueJS前端进行跨域通信时，如何正确设置并确保浏览器接收Cookie。重点分析了Flask中make_response和set_cookie的正确使用方式，并指出常见的返回错误，同时强调了CORS配置和前端withCredentials的重要性，旨在帮助开发者避免Cookie设置失败的问题。

1. Flask中Cookie设置机制概述

在web开发中，cookie是服务器向客户端浏览器发送的一小段数据，浏览器会将其保存并在后续请求中发送回服务器，常用于会话管理、用户身份认证等。在flask应用中，设置cookie通常涉及以下几个核心步骤：

创建响应对象：Flask的视图函数通常返回字符串、字典（会自动被jsonify处理成JSON响应）或Response对象。当需要对响应进行更细粒度的控制（如设置Cookie、HTTP头等）时，需要显式地创建一个Response对象。
设置Cookie：在创建的Response对象上调用set_cookie()方法来添加Cookie。
返回响应对象：将设置好Cookie的Response对象返回给客户端。

2. 问题分析：为何Cookie未能正确设置

许多开发者在Flask中尝试设置Cookie时，会遇到Cookie无法在浏览器中显示的问题。这通常发生在以下场景：前端（如VueJS配合Axios）发起请求，后端（Flask）处理认证逻辑并尝试设置Cookie，但最终浏览器并未存储Cookie。

考虑以下一个典型的Flask后端代码片段，其中包含一个常见的错误：

# main.py
from flask import Flask, make_response, jsonify
from flask_cors import CORS, cross_origin
# 假设 user 模块和 loginAccount 函数已定义

app = Flask(__name__)
CORS(app, support_credentials=True) # 启用CORS并支持凭据

@app.route('/api/account/login', methods=['POST'])
@cross_origin(supports_credentials=True)
def login_account():
    # loginAccount() 应该返回一个 Flask Response 对象
    return loginAccount()

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

登录后复制

# user.py (包含错误示例)
from flask import make_response, jsonify # 假设 db 和 jwt 等已导入和配置

def loginAccount():
    # 假设 email, SECRET_KEY, db 等已从请求或配置中获取
    email = "test@example.com" # 示例值
    SECRET_KEY = "your_secret_key" # 示例值

    # 模拟用户ID和token生成
    userId = "some_user_id" # 假设从db['users'].find()获取
    tokenId = "some_jwt_token" # jwt.encode({'userId': userId}, SECRET_KEY, algorithm='HS256')

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

    # 1. 创建响应对象
    response = make_response(jsonify(mensagem))

    # 2. 在响应对象上设置Cookie
    response.set_cookie('accessToken', tokenId, httponly=True, secure=True, samesite='Lax') # 添加更多安全属性

    # 3. 错误：返回了一个新的JSON响应，而非带有Cookie的响应对象
    return jsonify(mensagem) # ❌ 错误所在！

登录后复制

错误原因解释： 上述loginAccount函数的问题在于最后一行。虽然代码通过make_response(jsonify(mensagem))创建了一个response对象并在其上成功调用了set_cookie()，但最终返回的却是jsonify(mensagem)。jsonify(mensagem)会创建一个全新的Response对象，其中不包含之前在response对象上设置的任何Cookie信息。因此，带有Cookie的response对象被创建后却未被返回，导致Cookie未能发送到客户端。

3. 解决方案：返回正确的响应对象

解决上述问题的关键在于确保返回的是那个已经设置了Cookie的Response对象。

# user.py (修正后的示例)
from flask import make_response, jsonify # 假设 db 和 jwt 等已导入和配置

def loginAccount():
    # 假设 email, SECRET_KEY, db 等已从请求或配置中获取
    email = "test@example.com" # 示例值
    SECRET_KEY = "your_secret_key" # 示例值

    # 模拟用户ID和token生成
    userId = "some_user_id" # 假设从db['users'].find()获取
    tokenId = "some_jwt_token" # jwt.encode({'userId': userId}, SECRET_KEY, algorithm='HS256')

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

    # 1. 创建响应对象
    response = make_response(jsonify(mensagem))

    # 2. 在响应对象上设置Cookie
    response.set_cookie('accessToken', tokenId, httponly=True, secure=True, samesite='Lax') # 推荐添加安全属性

    # 3. 正确：返回带有Cookie的响应对象
    return response # ✅ 修正此处！

登录后复制

通过将return jsonify(mensagem)修改为return response，我们确保了包含accessToken Cookie的Response对象被正确地发送回客户端，浏览器便能接收并存储该Cookie。

立即学习“前端免费学习笔记（深入）”；

4. 前端配置要点：Axios withCredentials

当前端和后端部署在不同域（即跨域）时，为了让浏览器在跨域请求中发送和接收Cookie，前端请求库需要进行特定配置。以Axios为例，必须设置withCredentials: true。

// VueJS 前端代码示例
const apiUrl = 'http://127.0.0.1:5000' // 后端API地址

axios
  .post(
    `${apiUrl}/api/account/login`,
    {
      email: this.email,
      password: this.password,
    },
    {
      withCredentials: true, // 关键：允许跨域请求发送和接收Cookie
    }
  )
  .then((response) => {
    alert(response.data.message);
    console.log(response);
  })
  .catch((error) => {
    alert(`${error.response.data.erro}`);
    console.log(error);
  });

登录后复制

5. CORS配置：确保跨域Cookie传输

除了前端的withCredentials设置，后端也必须正确配置CORS（跨域资源共享）以允许Cookie的传输。对于Flask应用，通常使用flask-cors扩展。

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

# main.py (CORS配置)
from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
# 允许所有源（或指定源），并支持凭据（包括Cookie）
CORS(app, supports_credentials=True)

@app.route('/api/account/login', methods=['POST'])
# 针对特定路由再次确认支持凭据
@cross_origin(supports_credentials=True)
def login_account():
    # ...
    pass

登录后复制

supports_credentials=True是关键，它会设置Access-Control-Allow-Credentials: true响应头，告知浏览器允许携带和接收凭据（如Cookie）。同时，Access-Control-Allow-Origin头不能设置为*，而必须是具体的源地址（或动态设置），因为当supports_credentials为True时，Allow-Origin不能是通配符。

6. Cookie安全与最佳实践

在设置Cookie时，为了提高安全性，建议添加以下属性：

httponly=True：防止客户端JavaScript访问Cookie，降低XSS攻击风险。
secure=True：确保Cookie只通过HTTPS连接发送，防止中间人攻击。在开发环境（HTTP）下测试时可能需要暂时禁用或注意，但在生产环境务必开启。
samesite='Lax' 或 'Strict'：防止CSRF（跨站请求伪造）攻击。
- 'Lax'：默认值，允许顶级导航和GET请求发送Cookie，但POST请求通常不允许。
- 'Strict'：最严格，只允许同站请求发送Cookie。
- 'None'：允许跨站请求发送Cookie，但必须同时设置secure=True。如果需要跨域发送Cookie，且源站与目标站不同，可能需要考虑此选项，但应谨慎使用。

response.set_cookie('accessToken', tokenId, httponly=True, secure=True, samesite='Lax')

登录后复制

总结

在Flask中正确设置Cookie并确保前端能够接收，需要注意以下几个关键点：

返回正确的响应对象：务必返回那个在其中调用了set_cookie()方法的Response对象。
前端withCredentials：对于跨域请求，前端（如Axios）必须设置withCredentials: true。
后端CORS配置：Flask-CORS必须配置supports_credentials=True，并且Access-Control-Allow-Origin不能为*。
Cookie安全属性：利用httponly、secure和samesite等属性增强Cookie的安全性。

遵循这些实践，可以有效解决Flask应用中Cookie设置不生效的问题，并构建更健壮、安全的Web服务。

以上就是Flask跨域Cookie设置：确保前端正确接收的实践指南的详细内容，更多请关注php中文网其它相关文章！