不使用 React native 和 Flask/Flask jwt-extended 存储的 Cookie答案

【问题标题】：Cookies not stored with React native and Flask/ Flask jwt-extended不使用 React native 和 Flask/Flask jwt-extended 存储的 Cookie
【发布时间】：2020-08-16 13:23:54
【问题描述】：

我正在使用 Flask 和 flask-jwt-extended 来在我的服务器上进行身份验证。当我使用 Postman 时，我所有的 cookie 都设置正确。但是，当我使用浏览器和 react-native 时，没有存储任何 cookie。

Environment:
  Flask Backend: 127.0.0.1:5000
  React-Native Front: 127.0.0.1:19006

这是我的 Flask 配置：

    JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY", 'local-secret')
    JWT_TOKEN_LOCATION = ['cookies']
    JWT_ACCESS_TOKEN_EXPIRES = datetime.timedelta(seconds=1800)
    JWT_COOKIE_SECURE = False
    CORS_HEADERS = "Content-Type"
    JWT_REFRESH_TOKEN_EXPIRES = datetime.timedelta(days=15)
    JWT_COOKIE_CSRF_PROTECT = True  # set_refresh_cookies() will now also set the non-httponly CSRF cookies
    JWT_CSRF_CHECK_FORM = True
    JWT_ACCESS_CSRF_HEADER_NAME = "X-CSRF-TOKEN-ACCESS"
    JWT_REFRESH_CSRF_HEADER_NAME = "X-CSRF-TOKEN-REFRESH"
    SSL_REDIRECT = False

jwt = JWTManager()
app = Flask(__name__)
app.config.from_object(APP_CONFIG[CONFIG_ENV])
cors = CORS(app, resources={r"/*": {"origins": "http://127.0.0.1:19006"}}, supports_credentials=True)
APP_CONFIG[CONFIG_ENV].init_app(app)
jwt.init_app(app)

这是我存储 cookie 的方式（经典，与邮递员合作）：

access_token = create_access_token(identity = token_identity)
refresh_token = create_refresh_token(identity = token_identity)
resp = jsonify({"access_token": access_token, "refresh_token": refresh_token})
set_access_cookies(resp, access_token)
set_refresh_cookies(resp, refresh_token)

但是，每当我使用带有 react-native 的浏览器 (127.0.0.1:19006) 发出请求时，cookie 永远不会被存储。

有什么想法可以解决问题吗？

【问题讨论】：

标签： react-native flask flask-jwt-extended

【解决方案1】：

经过数小时的努力，解决方案比我想象的要简单：在前面的代码（react-native）中，我不得不添加：

credentials: "include"

在我的获取请求中。

见：https://developers.google.com/web/updates/2015/03/introduction-to-fetch

【讨论】：

【解决方案2】：

您可能会遇到一种称为同源策略的网络浏览器安全机制，它会处理这两个 url 和两个不同的域，因此不会保存 cookie。您可以使用 webpack 代理/apache/nginx 为同一域中的 api 和前端提供服务，或者可能查看 CORS 设置以允许此设置工作。

【讨论】：

感谢您的回答。 CORS设置是什么意思？我能改变什么？起初，我宁愿这样做，因为我仍在开发中。

【解决方案3】：

我也有这个问题。这就是我所做的：

前端： 添加凭据：在执行获取请求时添加“include”：

  fetch(domain + "/createAccount", {
        method: 'POST', 
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify(inputData),
    })
    .....

后端： 确保将Access-Control-Allow-Origin 设置为您的网址http://localhost:3000，将Access-Control-Allow-Credentials 设置为True，将samesite 设置为None，将secure 设置为True。

        resp = Response(
            .......
               
        )

        resp.headers.add('Access-Control-Allow-Origin', 'http://localhost:3000')
        resp.headers.add('Access-Control-Allow-Credentials', 'true')
        resp.set_cookie('token', value=encoded_jwt, httponly= True, expires = TOKEN_EXPIRY_DATE, samesite='None', secure=True)

【讨论】：