我目前正在构建一个 ReactJS（在“https://www.example.com”前面）flask（在“https://server.example.com”后面）应用程序。 React 客户端向我的 flask 服务器发出 GET 和 POST 请求，但首先，请求必须经过身份验证。我使用 flask-CORS 只接受来自“https://www.example.com”的请求。我在我的服务器上启用了“CORS_SUPPORTS_CREDENTIALS”，并且从客户端，我将获取请求设置为“凭据：'包含'”。

server.py

import os
import functools
from flask import flask,Blueprint,request,make_response
from flask_cors import CORS
from .config import Config

# Application factory pattern
def create_app():
    config_object = Config()
    app = flask(__name__)

    # Cross-Origin Config
    CORS(app,origins=[config_object.CORS_ALLOW_ORIGIN],# https://www.example.com
        supports_credentials=config_object.CORS_SUPPORTS_CREDENTIALS # True
    )
    app.config.from_object(config_object)

    app.register_blueprint(main)
    return app

# Cookie authentication
def auth_required(view):
    @functools.wraps(view)
    def wrapped_view(**kwargs):
        user_cookie = request.cookies.get('USER_ID_COOKIE')
        session_cookie = request.cookies.get('USER_SESSION_COOKIE')
        is_authenticated = verify_user_session(user_cookie,session_cookie) # T/F if this is a valid user

        if is_authenticated:
            # Continue to route...
            return view(**kwargs)
        else:
            # Reject request...
            response = make_response({"flash": "User not logged in."},403)
            return response
    return wrapped_view

bp = Blueprint('main',__name__)

@bp.get('/main/protected')
@auth_required
def get_protected_data():
    response = make_response({"fakeData": "Do you believe in life after love?"},200)
    return response

app = create_app()

if __name__ == "__main__":
    app.run()

snippet_from_protected_client.js

const MainPage = ({ setflashMessages }) => {
  let statusOK;
  let statusCode;

  const isStatusOK = (res) => {
    statusOK = res.ok;
    statusCode = res.status;
    return res.json();
  }

  const [data,setData] = useState(null);

  useEffect(() => {
    fetch(process.env.REact_APP_SERVER + '/main/protected',{ // REact_APP_SERVER=https://server.example.com
      credentials: 'include'
    })
    .then(isStatusOK)
    .then(data => {
      if (statusOK) {
        setData(data.fakeData);
      } else if (statusCode === 403) {
        setflashMessages(data.flash);
      }
    });
  },[]);

  return (
    <main>
      <div classname="container-md">
        <div classname="row">
          <div classname="col-md-1"></div>
          <div classname="col-md-11 mt-5">
            <h1 classname="text-start">My account</h1>
            <p classname="text-start">Just some filler text here.</p>
            <p classname="text-start">{ data }</p>
          </div>
        </div>
      </div>
    </main>
  );
}

export default MainPage;

希望你能明白——我已经缩写了很多，但保留了给我带来问题的主要功能。所以现在，问题：

我的 cookie 已创建并保存在浏览器中，已使用 JS 库 js-cookie 进行设置，如下所示：

snippet_from_login_client.js

Cookies.set('USER_ID_COOKIE','1',{ sameSite: 'none',secure: true}) // again,example
Cookies.set('USER_SESSION_COOKIE','ARanDomStrInGSetDURingLoGiNANDSTOrEDinTHESERVERDB',example

而且我知道它们已设置，因为我可以在开发人员工具中看到它们。但是，在对受保护路由的后续请求中，服务器接受请求（意味着它不是 CORS 源问题）但 @auth_required 抛出 403（如上所示）。在浏览器的开发工具中检查请求标头后，我可以看到请求没有与 cookie 一起发送！

来自浏览器开发工具的请求头

* accept: */*
* accept-Encoding: gzip,deflate,br
* accept-Language: en-US,en;q=0.9
* Connection: keep-alive
* Host: server.example.com
* Origin: https://www.example.com
* Referer: https://www.example.com/
* Sec-Fetch-Dest: empty
* Sec-Fetch-Mode: cors
* Sec-Fetch-Site: cross-site
* Sec-GPC: 1
* User-Agent: *DEVICE-DATA*

注意，尽管设置了 cookie，但没有 Cookie: -- 标头...

为什么我的 cookie 没有发送？任何提示或线索都会非常有用。