現状

Dockerでrails, node, Nginx, MySQLのイメージをビルドして動かしてます
ruby 2.73
rails 6.1.3.2
node 14.17-alpine
MySQL 5.7
です。フロントはnom create-react-appで作りました。

railsのエンドポイントにブラウザから直接アクセスするとクッキーの保存を確認できます。しかしフロントからアクセスするとクッキーが作られないです。一応、フロントからアクセスした場合もそのrailsのアクション内ではクッキーを確認できます。

実現したいこと

クロスオリジンでもcookieが作られるようにしたいです。

発生している問題・エラーメッセージ

エラー等は見当たらないです。

該当のヘッダー

Ggeneral

Request URL: http://localhost:3000/cookies
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin

Response Headers

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: http://localhost:8000
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: no-store, must-revalidate, private, max-age=0
Content-Type: application/json; charset=utf-8
Referrer-Policy: strict-origin-when-cross-origin
Set-Cookie: heart=2%26; path=/; expires=Sun, 09 Jun 2041 04:12:28 GMT; SameSite=Lax
Set-Cookie: _session_id=eqber0r2mSXHDgWyjx6qDkPvTU5eHyx9Y5p6%2B3XfofVBeLu%2Bur8deAKg5Dnpz%2BJfsMLBebrPLe5nevkLq%2FOeW6frBwOKwv11pVs7xXxRhvYHuU0FSxgQeGsVF7H9P0z%2BPMDFTQIWCWg191smFB4oXiG2c%2F%2BU0uHArmkUCCP7bba6bWuLStfVbvj0Lpq4mFxItVh1--yvc9LfUInUeOz178--G0Rcb%2BW0LRcW2QmlVgCb0g%3D%3D; path=/; HttpOnly; SameSite=Lax
Set-Cookie: heart=2%26; path=/; expires=Sun, 09 Jun 2041 04:12:28 GMT; SameSite=Lax
Set-Cookie: _session_id=eqber0r2mSXHDgWyjx6qDkPvTU5eHyx9Y5p6%2B3XfofVBeLu%2Bur8deAKg5Dnpz%2BJfsMLBebrPLe5nevkLq%2FOeW6frBwOKwv11pVs7xXxRhvYHuU0FSxgQeGsVF7H9P0z%2BPMDFTQIWCWg191smFB4oXiG2c%2F%2BU0uHArmkUCCP7bba6bWuLStfVbvj0Lpq4mFxItVh1--yvc9LfUInUeOz178--G0Rcb%2BW0LRcW2QmlVgCb0g%3D%3D; path=/; HttpOnly; SameSite=Lax
Set-Cookie: _dhioru=%2FAC394e5nlSWf0o%2FcS5DDLzzSBv3I6GKrKG9G%2Fw20oPCTYucAjN5jtDWS5SzAq%2BiL1LWP0qATqZZxQnzGEG6A8fbYo0z6FwP7UlRqGjPePbBPKwrgZVc2nCb2hhzLV8mYqYAR3kkIUOVNdfbvfS%2FO%2Fi3xjhmN%2BQlGKJkpKxMuU30KfjTcnLB8GKgQ%2F%2B4w0M%3D--6s0zMVohGU8aJIH3--npW7DH1Qs1q%2FhCfH8wYlkA%3D%3D; path=/; HttpOnly; SameSite=Lax
Set-Cookie: __profilin=p%3Dt; path=/; HttpOnly; SameSite=Lax
Transfer-Encoding: chunked
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-MiniProfiler-Ids: cy6hsc79m5um98f7z26v,7ryg1st8v8x5mpcses89,jhf9f4zzwazmol5v26dp,feccdjrkb842z6nzree1,ut2yjs3y88q9oqomr6sf,qodriy5b4fbap77ypz6q,bpaxart9p4e9j62bq1n0,a5g8ut8jhr1jspmzec32,vweyw089i0m78uel0m0y,q9i0pmnwqjjq9oib7xg4,ewliul8kc9lde7bfi9ev,i7amrery7gnj7xak7hmk,f9tc6mkzxvqdl2qs5dyi,zm4he213u4hfyimd5s4w,r98i638tjhss8clieagx,qklf0djz0bke0geeatdg,4g20tlm6dr6wdk5n61hd,bhczl2at7vd9l4yb292c,slreeaz6j6kumfrmtmbt,qyrzzi6k87msvemblx1e
X-MiniProfiler-Original-Cache-Control: max-age=0, private, must-revalidate
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 7a13e18f-5553-4332-9d11-1216da708fa5
X-Runtime: 0.089528
X-XSS-Protection: 1; mode=block

Request Headers

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 66
Content-Type: application/json;charset=UTF-8
Host: localhost:3000
Origin: http://localhost:8000
Referer: http://localhost:8000/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Request Payload

{withCredentials: true, item_id: 2, type: "heart", size_id: null}
item_id: 2
size_id: null
type: "heart"
withCredentials: true

試したこと

・rack-corsの設定
・same_sate_protectionをlax、secureをfalseにする
・クッキーのミドルウェアを入れる
・api_onlyをfalseにする
・include ActionController::Cookies
・front側のリクエストにwithCredentialsを入れる

何かヒントだけても下されば幸いです。