本教程详细探讨了在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.pyfrom flask import Flask, make_response, jsonifyfrom 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扩展。
# main.py (CORS配置)from flask import Flaskfrom flask_cors import CORS, cross_originapp = 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设置：确保前端正确接收的实践指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1371688.html
微信扫一扫 
支付宝扫一扫 
