Flask+React项目：Postman可接收Cookie但浏览器无法接收问题求助

1. 修正Axios请求的Content-Type配置 #

你当前手动设置了Content-Type: multipart/form-data，但请求体是普通JSON对象，这会导致后端无法正确解析请求数据，甚至触发CORS错误或请求失败，进而使then回调无法执行。

方案一：使用JSON格式提交（推荐） #

去掉手动指定的Content-Type，axios会自动匹配请求体类型设置为application/json：

const handleLogin = function(){
  axios.post("http://127.0.0.1:5000/login", {email:email, password:password}, {withCredentials:true})
  .then(response => {
    if(response.data.message === "Logado com sucesso"){
      history.push('/');
    }
  }).catch(error => {
    alert(error?.response?.data || '请求失败');
    console.error("Error occurred in login request:", error);
  });
}

方案二：使用FormData提交（若后端期望表单数据） #

如果后端是按表单格式解析数据，需将请求体转为FormData：

const handleLogin = function(){
  const formData = new FormData();
  formData.append('email', email);
  formData.append('password', password);
  
  axios.post("http://127.0.0.1:5000/login", formData, {withCredentials:true})
  .then(response => {
    if(response.data.message === "Logado com sucesso"){
      history.push('/');
    }
  }).catch(error => {
    alert(error?.response?.data || '请求失败');
    console.error("Error occurred in login request:", error);
  });
}

2. 完善Flask后端的Cookie与CORS配置 #

（1）Cookie需配合secure=True（SameSite=None时强制要求） #

浏览器规定，设置SameSite=None的Cookie必须同时开启secure=True（仅在HTTPS环境生效，localhost测试部分浏览器可豁免，但生产环境必须配置），否则Cookie不会被浏览器保存：

if(check_password_hash(data[19],password)):
    resposta = make_response(jsonify({"message": "Logado com sucesso"}))
    resposta.set_cookie('id', str(data[0]), httponly=True, samesite='None', secure=True)
    return resposta

（2）确认Flask-CORS配置正确 #

带凭证的CORS请求不允许使用*作为允许的Origin，需明确指定前端地址，同时开启凭证支持：

from flask_cors import CORS

app = Flask(__name__)
# 替换为你的React前端实际地址，如http://localhost:3000
CORS(app, supports_credentials=True, origins=["http://localhost:3000"])

3. 后端确保正确解析请求数据 #

• 若用JSON格式提交，后端需用request.get_json()获取数据：

from flask import request

@app.route('/login', methods=['POST'])
def login():
    req_data = request.get_json()
    email = req_data.get('email')
    password = req_data.get('password')
    # 后续验证逻辑...

• 若用FormData提交，后端用request.form获取：

email = request.form.get('email')
password = request.form.get('password')

快速排查步骤 #

1. 打开浏览器控制台网络面板，查看/login请求的状态码、响应头，确认是否存在CORS错误或4xx/5xx状态码。
2. 检查请求头的Origin是否与后端CORS配置的origins完全匹配。
3. 确认响应头中包含Access-Control-Allow-Credentials: true。

内容的提问来源于stack exchange，提问作者Rodrigo Faria