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.
1const allowCors = fn => async (req, res) => {2 res.setHeader('Access-Control-Allow-Credentials', true)3 res.setHeader('Access-Control-Allow-Origin', '*')4 // another common pattern5 // 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 return14 }15 return await fn(req, res)16}17
18const handler = (req, res) => {19 const d = new Date()20 res.end(d.toString())21}22
23module.exports = allowCors(handler)24
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.js2module.exports = {3 async headers() {4 return [5 {6 // matching all API routes7 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
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