CORS でクッキーが保存できない

Question

お世話になっております。
CORS でクッキーを保存することができず、このたび質問させていただきました。
何か思い当たることなどありましたら、ご教示いただけると幸いでございます。

環境

以下のようにサーバを２つ立ち上げました。

名称	URL
API サーバ	https://127.0.0.1:5000/
クライアント	https://127.0.0.1:5001/

◯ API サーバ

API サーバには以下のようなレスポンスを返すようにしています。

$ curl -i https://127.0.0.1:5000/
HTTP/1.0 200 OK
Content-Type: text/plain; charset=utf-8
Content-Length: 20
Access-Control-Allow-Origin: https://127.0.0.1:5001
Access-Control-Allow-Method: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Headers: Content-type,Accept,X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400
set-cookie: connect.sid=s%3AM9NQy3hz5cLb3kW6htuybWE6nEX1_iL6.ENXqiTfVPMQVyP%2FGFZ9pshnC87D7rX5%2BM48mjVqwR7s; Path=/; HttpOnly; Secure
Server: Werkzeug/0.16.0 Python/3.7.4
Date: Tue, 15 Oct 2019 11:57:47 GMT

This is a sample page.
$

◯ クライアント

"This is a sample page." とだけ表示されるページを作成しました。

試したこと

◯ その１ 成功 - ブラウザから直接

https://127.0.0.1:5000/ にブラウザから直接アクセス
-> 問題なくクッキーが保存されました。

◯ その２ 成功 - CORS ではない fetch

https://127.0.0.1:5000/ にブラウザでアクセス
保存されたクッキーを消す
デベロッパツールのコンソールから fetch を使い、以下のスクリプトを実行します。

fetch(
  'https://127.0.0.1:5000/',
  { 
    mode: 'cors',
    credential: 'include',
  }).then(function(response) {
    console.log(response);
  })

-> 問題なくクッキーが保存されました。

その３ 失敗 - CORS で fetch

https://127.0.0.1:5001/ にブラウザでアクセス
デベロッパツールのコンソールから fetch を使い、上記のスクリプトを実行しました。
-> クッキーは保存され ない。

結果の詳細は、以下のような具合です。

ブラウザ	コンソール	ネットワーク	ストレージ
Chrome	エラーは起こらない	Set-Cookie ヘッダが表示される	クッキーは保存され ない
Safari	エラーは起こらない	Set-Cookie ヘッダが表示され ない	クッキーは保存され ない

Chrome はヘッダーにさえ表示されません。
ただ Safari の方は、クッキーを認識してくれてはいるように見えています。

参考にさせていただいているサイト

主にこちらを参考にしました。

• Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト

また以下の Stackoverflow の記事から、
もしかして、そもそもできないのかなと疑問を抱いております。

追記された回答にサブドメインに登録すれば使えるよ、
と書かれていたので、hosts ファイルから api.example.com, example.com を設定して、
似たようなことをしてみたのですが、ダメでした。

Safari not setting CORS cookies using JS Fetch API - Stackoverflow
I find it pretty enraging that this is a "working as intended" behaviour of Safari, though I understand their motivation. XHR (and presumably native fetch when it lands natively) does not support the setting of third-party cookies at all.
This failure is completely transparent because it is handled by the browser outside of the scripting context, so client-based solutions are not really going to be possible.

環境の補足

◯ 使用しているサーバ

サーバは Flask を使用しています。

# api.py
from flask import Flask
from flask import Response

app = Flask(__name__)

@app.route("/")
def index():
    resp = Response("Hello, world!")
    resp.headers['Access-Control-Allow-Origin'] = 'https://127.0.0.1:5001'
    resp.headers['Access-Control-Allow-Method'] = 'GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS'
    resp.headers['Access-Control-Allow-Headers'] = 'Content-type,Accept,X-Custom-Header'
    resp.headers['Access-Control-Allow-Credentials'] = 'true'
    resp.headers['Access-Control-Max-Age'] = '86400'
    resp.headers['Content-Type'] = 'text/plain; charset=utf-8'
    resp.headers['set-cookie'] = 'connect.sid=s%3AM9NQy3hz5cLb3kW6htuybWE6nEX1_iL6.ENXqiTfVPMQVyP%2FGFZ9pshnC87D7rX5%2BM48mjVqwR7s; Path=/; HttpOnly; Secure'
    return resp

# clietn.py
from flask import Flask

client = Flask(__name__)

@client.route('/')
def index():
    return "This is a sample page."

◯ SSL 秘密鍵と証明書

mkcert を使って、オレオレ証明書を発行しています。

mkcert 127.0.0.1

以上になります。
目を通していただき、ありがとうございます。

Answer 1

スペルミスでした... credentials の s が抜けてました... orz
お騒がせして申し訳ございませんでした。

fetch(
  'https://127.0.0.1:5000/',
  { 
    mode: 'cors',
    credentials: 'include',  // <--- s が抜けてました...
  }).then(function(response) {
    console.log(response);
  })