Flask 会话无法在反应前端应用程序上创建 cookie（使用 set-cookie 响应标头）

Question

问题

我正在尝试使用服务器端会话（保存在 PSQL 数据库中），但它们没有在请求之间持续存在。

说明

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

1. 在 MY_IP:2501 上运行的后端
2. 在 MY_IP:3000 上运行的前端

现在，根据我的理解，Flask 将会话保存在 PSQL 的“会话”表中（因为我们正在存储服务器端会话），并且该特定行的 ID 以响应标头的形式发送到客户端，即“设置 Cookie”。

上面描述的每件事都在工作，但是当 React 前端（或浏览器）收到这个头时，它不会从中创建一个 cookie，因为会话 ID 没有存储在前端，然后前端就无法将相同的内容发送到后端，因为它无法获取相关的会话数据，导致每次都为空会话。

:(

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

1. 在返回响应时允许所有类型的标头。

    `response.headers.add('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept, x-auth")`
   

2. 已完成，允许来自前端和后端的 withCredentials 标头属性。

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

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

注意

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

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

Answer 1

仅需要的配置：

1. 发送带有标题withCredentials = true 的请求（REST / GraphQL）。
2. 从后端添加Access-Control-Allow-Credentials = true 标头。

在 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