Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う

概要

Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う方法に関する備忘録です。

背景

以下の記事で紹介したプログラムについて、cors対応を行いました。

https://zenn.dev/nakamura196/articles/bc78940bb28b7a

以下を参考にしています。

https://vercel.com/guides/how-to-enable-cors

方法

対応方法は以下です。他にも方法があるかと思いますが、headersを加えることで対応することができました。

https://github.com/nakamura196/dts-typescript/commit/4c28f66b2af68950656dcb812f3e941d1b9b5feb

{
  "version": 2,
  "builds": [
    {
      "src": "src/index.ts",
      "use": "@vercel/node"
    }
  ],
  "rewrites": [
    {
      "source": "/api/dts(.*)",
      "destination": "/src/index.ts"
    }
  ],
  "redirects": [
    {
      "source": "/",
      "destination": "/api/dts",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}

まとめ

参考になりましたら幸いです。