くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > unjs > UnJS/Nitro ServerでCORSのpreflight requestに対応する

UnJS/Nitro ServerでCORSのpreflight requestに対応する

unjs nitro server CORS

UnJSのNitroでAPIサーバを開発しているときに、
CORSでハマったときにいろいろ調べたときの備忘録(*´ω｀*)

preflight requestというのがあり、
OPTIONSmethodでリクエストが飛んでくるが、
GETしか許可していなかったため、うまくいかなかったっぽい

nitro.config.tsの設定

nitro.config.tsのrouteRulesで、
全ルートにCORSの設定を追加。

//https://nitro.unjs.io/config
export default defineNitroConfig({
  routeRules: {
    // ネストを含む全てのルートに適用
    "/**": {
      cors: true,
      headers: {
        // すべてのoriginを許可
        "Access-Control-Allow-Origin": "*",
        // 許可するmethod
        "Access-Control-Allow-Methods": "OPTIONS,GET,POST,PUT,PATCH,DELETE",
        // 許可するリクエストヘッダ
        "Access-Control-Allow-Headers": "Authorization,X-API-KEY",
        // 許可するレスポンスヘッダ
        "Access-Control-Expose-Headers": "X-CUSTOM",
        // iframeを許可しない
        "X-FRAME-OPTIONS": "DENY",
      }
    }
  }
});

OPTIONSのリクエストへの対応

OPTIONSのリクエストへの対応するために、
全ルートのOPTIONSメソッドでOKを返すファイルを追加する。

// routes/[...].options.ts

export default eventHandler((event) => {
  // CORSのprefilght request対応
  // optionsの場合はOK(200)を返す
  return;
});

middlewareまわりも

middlewareで認証処理している場合は、
OPTIONSのときに無視するように設定しておく

// middleware/auth.ts
export default defineEventHandler(async (event) => {
  // CORSのprefilght request対応: OPTIONSメソッドの場合はskip
  if (event.method == "OPTIONS") return;

  // ...認証処理
});

以上!! 地味にハマったけどなんとかなった(*´ω｀*)

参考にしたサイト様