バックエンドからCookieをフロントエンドに設定する

Question

こんにちは
質問させて下さい。現在React、Node.jsでウェブアプリケーションを作成しており、デプロイ後、バックエンド側で生成したJWTのトークン（文字列）をres.cookieを使ってフロントエンドのCookieに保管をしたいのですか実現できません。調べてみると違うドメイン間だとできないらしいのですがいい方法はありませんでしょうか？　ちなみにローカルでの作成時にはフロントエンド側でProxy：”http://localhost:8800"(バックエンド側のURL）を設定し同一ドメイン、ポートにすることにより実現しておりました。
フロントエンドはNetlify でホストhttps://something.netlify.app/
バックエンドはheroku でホスト　https://something.herokuapp.com/

ここに実現したいことを箇条書きで書いてください。

• アプリをデプロイ後、JWTトークンをバックエンドからフロントエンドのCookieに保管したい。

該当のソースコード

一部　Cookie生成のコード
const token=jwt.sign({id:data[0].id},process.env.JWT)
console.log(token)
res.cookie("access_token",token,{
domain:".netlify.app",
httpOnly:true,
secure:true,
SameSite:"none"
}).status(200).json(data[0])

index.js 一部
const app = express();
dotenv.config();
app.set("trust proxy",1)
app.use(express.json())
app.use(cors({
origin:"https://something.netlify.app",
credentials:true,
}))
app.use(helmet());
app.use(cookieParser()

javascript

Comments

[yuma.inaura]

コードやエラーはコードブロックで囲うと回答者が読みやすくなり、回答がつきやすくなりますよ

[John]

すいません、コードブロックで囲うとはどういうことでしょうか？

[YT0014]

コードブロックなどのマークダウンのヘルプです。
https://teratail.com/help#about-markdown

[John]

ありがとうございます。参考にさせていただきます。

Answer 1

サブドメイン間なら可能だけど別ドメインでは無理。

バックエンドからフロントへはクッキーを使わずトークンを渡してフロント側でどこかに持っておく。

こういうのは自分で考えなくていい。自分で作る前に既存の仕組みを色々知っておくことが大事。
先にフロントのJSからも使えるGoogleのOAuthでも試してみればいい。クッキーなんて全く出てこない。
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
OAuthを使った経験があればクッキーを使う発想は最初から出てこない。

Comments

[John]

回答ありがとうございます。Oauth使ったことありません。今少し調べましたが、Oauthもアクセストークンを出すそうですがこれはどこに保存しますか？回答よろしくお願いします。

[John]

すいません。僕が間違っていました。もうちょっと調べてみます。ありがとうございます。