Flask+React+Sqlite栈下session.get()经前端fetch请求返回None问题

问题根因 #

跨域请求默认不会携带Cookie类的身份凭证，Flask用于识别用户会话的session标识就存储在Cookie中，前端fetch请求没有携带对应Cookie时，后端无法识别用户身份，自然拿不到session里存储的user_id。你手动在浏览器访问接口时是同域下的请求，会自动携带Cookie，所以能正常拿到用户ID。

解决方案 #

1. 前端fetch请求添加凭证携带配置 #

修改你的React组件里的fetch请求，增加credentials: 'include'参数，强制跨域请求携带Cookie：

import React, { useState, useEffect } from 'react';

export default function GetLists() {
    const [lists, setLists] = useState('');
    useEffect(() => {
        fetch('http://localhost:5000/getlists', {
          // 新增这一行配置
          credentials: 'include'
        })
            .then(response => response.json())
            .then(data => console.log(data))
        },[]);
    return (...);
}

2. 后端CORS配置适配凭证请求 #

默认的CORS配置不支持跨域携带凭证，你需要修改Flask的CORS初始化代码，开启凭证支持，同时明确指定允许的前端源（不能用通配符*，否则和凭证规则冲突）：

# 把原来的 CORS(app) 替换成下面这行
CORS(app, supports_credentials=True, origins=["http://localhost:3000"])

修改完成后重启后端服务即可，此时getlists接口就能正常拿到session里的user_id了。

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