Skip to content
← Back to Guides

How can I enable CORS on Vercel?

The Vercel platform allows developers to specify response headers when a request comes in. It is a common pattern to allow CORS requests for Serverless Function invocations and for static assets.

Understanding CORS

Before enabling this feature for your website, it is important to understand what "Cross-Origin Resource Sharing" is. It is particularly important to be aware of the security implications when allowing your API to be fetched from all origins. We recommend that you take a look at the following articles before proceeding:

Enabling CORS in a single Node.js Serverless Function

Once you understand what CORS is and the potential risks of enabling it, you can do so by configuring a few headers in the response object.

1
const allowCors = fn => async (req, res) => {
2
  res.setHeader('Access-Control-Allow-Credentials', true)
3
  res.setHeader('Access-Control-Allow-Origin', '*')
4
  // another common pattern
5
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
6
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
7
  res.setHeader(
8
    'Access-Control-Allow-Headers',
9
    'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
10
  )
11
  if (req.method === 'OPTIONS') {
12
    res.status(200).end()
13
    return
14
  }
15
  return await fn(req, res)
16
}
17


18
const handler = (req, res) => {
19
  const d = new Date()
20
  res.end(d.toString())
21
}
22


23
module.exports = allowCors(handler)
24
An example of how to enable CORS using Node.js Serverless Functions deployed on Vercel.

The allowCors function acts as a wrapper, enabling CORS for the Serverless Function passed to it. This is a common pattern when using middleware in Serverless Functions and can be applied to multiple scenarios.

Enabling CORS in a Next.js App

In the next.config.js file, a "headers" function can be created:

1
// next.config.js
2
module.exports = {
3
  async headers() {
4
    return [
5
      {
6
        // matching all API routes
7
        source: "/api/:path*",
8
        headers: [
9
          { key: "Access-Control-Allow-Credentials", value: "true" },
10
          { key: "Access-Control-Allow-Origin", value: "*" },
11
          { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
12
          { 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" },
13
        ]
14
      }
15
    ]
16
  }
17
};
18
An example of how to enable CORS using Next.js routing configuration.

The headers() function allows you to define paths associated with a set of headers. It can be useful to allow CORS in multiple routes.

Enabling CORS using vercel.json

If you are not using Next.js, you can still enable headers in multiple paths by using the Vercel configuration file.

Create a new vercel.json with a new "headers" key:

1
{
2
  "headers": [
3
    {
4
      "source": "/api/(.*)",
5
      "headers": [
6
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
7
        { "key": "Access-Control-Allow-Origin", "value": "*" },
8
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
9
        { "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" }
10
      ]
11
    }
12
  ]
13
}
14
An example of how to enable CORS using the Vercel headers configuration.

Couldn't find the guide you need?