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.

GitHub Repository for DTS API for TEI/XML Files Published in the Koui Genji Monogatari Text DB
GitHub Repository for DTS API for TEI/XML Files Published in the Koui Genji Monogatari Text DB
ldas.jp

The following was used as a reference.

How can I enable CORS on Vercel? | Vercel Knowledge Base
Learn how to add CORS headers to your application on Vercel.
vercel.com

Method

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

feat: add cors · nakamura196/dts-typescript@4c28f66
Distributed Text Services (DTS) API for the TEI/XML files available in the Kouigenji Monogatari Text DB - feat: add cors · nakamura196/dts-typescript@4c28f66
GitHub
 
{
  "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.