Overview

This is a memo on how to handle CORS for Express deployed on Vercel using vercel.json.

Background

I implemented CORS handling for the program introduced in the following article.

The following was used as a reference.

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

Method

The solution is as follows. While there may be other approaches, adding headers resolved the issue.

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"
        }
      ]
    }
  ]
}

Summary

I hope this serves as a helpful reference.