はじめに

備忘録です。
下記の構成でアプリケーションを作成する際にCORSを解放する必要がありました。
ExpressでJSON形式のAPI
フロントエンドでReact

CORSを解放するのはCookieを設定したいためであることが多いと思います。
ついでに載せておきます。

CORSとは？

CROSS-ORIGIN-RECOSE-SHARERING
オリジンが違う場合でもアクセスできるようにする処理です

SPAの場合
バックエンドはlocalhost:4000
フロントエンドはlocalhost:3000
といったかんじで同一オリジンではないので、Cookie関連の処理ができません。
正確にいうとPOSTリクエストでCookie関連の処理ができません。 GETはできたはず？

cors

こういった設定はheaderというところに設定を記述します。
npmには便利なパッケージがあるので使います。

import cors from "cors"

app.use(
  cors({
    // cookieの送受信を可能にする
    credentials: true,
    // 許可するドメイン登録
    origin: 'url',
  }),
);

// 複数ある場合の解放方法
origin: ['url1', 'url2'],

上記は下記のようなことを行っています。

// packageを使わずに手動で設定する場合
app.use(function (req, res, next) {
  // アクセスを許可するオリジン(ドメイン)を登録
  res.header("Access-Control-Allow-Origin", "url");
  // 許可したドメインでCookie関連の処理を許可するか設定
  // Access-Control-Allow-Originを*で全て許可していた場合tureにできない
  res.header("Access-Control-Allow-Credentials", true);
  // expressの機能で、次の処理に進ませる
  next();
});

Access-Control-Allow-Originを*で全て許可していた場合tureにできないの部分ですが、
*を利用して全ての接続を許可することができるのですが、良くないみたいです。ネットサーフィンしている時にどこかで読みました。

ここまでがフロントエンドとのCookieの送受信を可能にするためのCORSの設定です。

cookieの保存

express標準の機能でCookieの保存ができます

// 下記の構成になっています。
// 下記の記述があると、HTTPレスポンスヘッダに対して、Set-Cookieというものを付与します。
// クライアントはその値を見て、Cookieを自動で保存します。
// つまり、リクエストを飛ばせば、特に何をするまでもなく自動で保存されます。
res.cookie("key", "value", {option})

// 下記のエンドポイントを叩くと、`name: hogehoge`がCookieに保存されます。
app.get('/', (req, res) => {
  res.cookie('name', 'hogehoge', { 
    sameSite: 'none',
    secure: true,
    maxAge: 24 * 60 * 60 * 1000,
    httpOnly: true,
  });
  res.send('Cookie has been set');
});

オプションの解説をします

// 他のドメイン(別オリジン)からのPOSTでもCookieの送受信を許可
sameSite: 'none'

// HTTPSで暗号化された通信以外は拒絶する (HTTP接続を禁止)
// localhostの場合HTTPでも接続できる
// ブラウザによってsameSite noneでsecureがfalseの場合Cookieの処理を受け付けなくなっている
// Chromeのような主要ブラウザではそうなっているのでほぼ必須と言える
// つまり、sampeSiteを'none'にする場合必ずtrueである必要がある
secure: true,

// Cookieの有効期限
// ms秒で設定します。 下記は24Hです。
maxAge: 24 * 60 * 60 * 1000,

// JavaScriptでアクセスできなくする
// HTTPでしか接続できなくするものではないです (HTTPS接続を禁止するものではないです)
// この設定により不正なサイトにユーザーが誘導され、Cookieの値が抜き取られることを防ぎます
httpOnly: true,

いろいろ説明してきましたが、クロスオリジンでCookieをやりとりするための必須項目は下記3つです。

CORSの設定
sameSite: true (Cookie保存時)
secure: true (Cookie保存時)

他は最悪なくても動きますが、セキュリティ的に本番環境では設定した方が良いです

cookieParser

リクエストからcookieを取得するためのpackage
ExpressはCokkieの保存には追加packageが不要ですが、Cookieの取得には追加のpackageが必要です。
自力でできないこともないですが、かなり面倒です

import cookieParser from "cookie-parser"

app.use(cookieParser());

app.get('/', (req, res) => {
  // 下記のようのreqestからcookieの値を取得できる
  const cookieValue = req.cookies.name;
  res.json({ name: cookieValue })
});

フロントエンド側の話も

axiosを使う場合を例に挙げてみます
ちなみにfetchも同じで、デフォルトではCookieの送信や受信時のCookie追加の処理をしません
fetchの場合は設定値の仕方が若干変わるので調べてみてください

// デフォルトではCookieの送信や受信後の処理を行わない
// withCredentialsをtureに設定する
const getCookie = async () => {
  const response = await axios.get(URL, {
    withCredentials: true,
  });
  console.log(response.data);
};

終わりに

Expressは情報が比較的多いのですが、SPA特有の設定調べるのに時間がかかりますね・・・

Cookieは検証ツールのApplicationタブから見ることができます。
フロントエンドからAPIを叩いた際、検証ツールのNetworkタブでheader情報を確認することができます。
Cookieの追加の場合Responseの部分にSet-Cookieがあるはずです。
自分でいろいろ検証したい場合は参考にしてください