Flask session 无法在 React 前端应用程序上创建 cookie(使用 set-cookie 响应 headers)

Flask session is not able to create cookies (using set-cookie response headers) on react front end application

问题

我正在尝试使用服务器端 session(保存在 PSQL 数据库中)但它们不会在请求之间持续存在。

描述

我在本地 运行 我的应用程序分为两部分。

  1. 后端运行宁 MY_IP:2501
  2. 运行前端 MY_IP:3000

现在根据我的理解,Flask 将 session 保存在 PSQL 的“session”table 中(因为我们正在存储服务器端 sessions)并且该特定行的 ID 以响应 header 的形式发送到客户端,即“Set-Cookie”。

上面描述的每件事都有效,但是当 React 前端(或浏览器)收到这个 header 它不会从中创建一个 cookie,因为 session id 不是存储在前端,然后前端无法将其发送到后端,因此无法获取关联的 session 数据,导致每次都为空 session。

:(

到目前为止我已经尝试过的东西..

  1. 返回响应时允许所有类型的 header。

     `response.headers.add('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept, x-auth")`
    
  2. 完成允许来自前端和后端的 withCredentials header 属性。

  3. 使用“SESSION_COOKIE_HTTPONLY”配置从 session 中删除了 HttpOnly 参数 属性

  4. 完成设置与前端相同的“SESSION_COOKIE_DOMAIN”

注意

  1. 如果我通过 POSTMAN 调用我的 API,session 会持续存在,因为 cookie 保存在 POSTMAN 中。

  2. 如果我运行 chrome上的应用程序--disable-web-security,那么它也可以工作。

仅需要的配置:

  1. 使用 header withCredentials = true.
  2. 发送请求 (REST / GraphQL)
  3. 从后端添加 Access-Control-Allow-Credentials = true headers。

在 Axios 上(前端 REST API)。

import axios from 'axios';

export const restApi = axios.create({
  baseURL: urlBuilder.REST,
  withCredentials: true
});

restApi.interceptors.request.use(
  function(config) {
    config.headers.withCredentials = true;   # Sending request with credentials
    return config;
  },
  function(err) {
    return Promise.reject(err);
  }
);

在 Apollo 上(前端 GraphQL)

import {
  ApolloClient,
  ApolloLink
} from 'apollo-boost';

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    fetchOptions: {
      credentials: 'include' .         # Sending request with credentials
    }
  });
  return forward(operation);
});

在 Python-Flask(后端)

@app.after_request
def middleware_for_response(response):
    # Allowing the credentials in the response.
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    return response