【tRPC + Express】CORS設定

概要

tRPC + Express の CORS の設定です。

手順

0. 前提条件

環境は以下です。

• Windows10
• npm

また、本記事はtRPC 公式ドキュメントの Express 設定状態を前提としています。

1. corsパッケージインストール

npm install cors

2. CORS 設定

tRPC を Express ミドルウェアに変換するcreateExpressMiddlewareメソッドより前にapp.use(cors())します（後にするとうまく動きませんでした。詳しい方いらっしゃったらコメントいただけると幸いです）。

// 中略

const app = express();

app.use(
  cors({
    origin: "http://localhost:3000",
    optionsSuccessStatus: 200,
  })
);

app.use(
  "/trpc",
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  })
);

以上で設定は終了です。

参考文献

• cors
• Build tRPC API with React.js, Express & Node.js: Project Setup