Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Question

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Recently, I have been testing different methods to avoid a CORS error in my upcoming app deployed on Vercel. The only solution that worked for me was manually setting the headers for each API request, as shown below:

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET')
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  )

  // Handling pre-flight requests
  if (req.method === 'OPTIONS') {
    res.status(200).end()
    return
  }

  let houses: House[] = []

  try {
    await client.connect()
    console.log('Successfully connected to MongoDB')

    const db = client.db('vroom')
    const housesCollection = db.collection('houses')

    houses = (await housesCollection.find().toArray()).map((house) => ({
      house: house.house,
      price: house.price,
      timestamp: house.timestamp,
      developer: house.developer,
    }))

    console.log('Retrieved houses:', houses)
  } catch (error) {
    console.error(`Error while connecting to MongoDB: ${error}`)
  } finally {
    await client.close()
  }

  res.json({ houses })
}

Is there a way to achieve the same outcome using the middleware.ts file or by implementing wrapper code? I would appreciate any guidance on this matter.

Feel free to ask for clarification if needed!

Thank you!

I attempted the above steps but had to include some text here :)

typescript express next.js cors vercel

Answer 1

Answer №1

If you're looking to enable CORS in your Next.js application, you have a couple of options. One approach is to utilize the Nextjs-Cors package, or alternatively, you can implement your custom middleware as shown below.

To create a CORS middleware, you can start by creating a middleware.ts (or .js) file at the same hierarchical level as your pages directory within the root or src directory.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import NextCors from 'nextjs-cors';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  // Execute the CORS middleware
  await NextCors(req, res, {
    // Configuration options
    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
    origin: '*',
    optionsSuccessStatus: 200,
  });
  return res
}

https://www.npmjs.com/package/nextjs-cors

# Installation using npm
npm install --save nextjs-cors@latest

# Installation using yarn
yarn add nextjs-cors@latest

# Installation using pnpm
pnpm add nextjs-cors@latest

Implementing Custom CORS Logic (without dependencies)

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  const res = NextResponse.next()
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET')
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  )

  // Handling pre-flight requests
  if (req.method === 'OPTIONS') {
    return new NextResponse('ok',{status:200})

  }

  return res
}

Answer 2

If you're looking to enable CORS in your Next.js application, you have a couple of options. One approach is to utilize the Nextjs-Cors package, or alternatively, you can implement your custom middleware as shown below.

To create a CORS middleware, you can start by creating a middleware.ts (or .js) file at the same hierarchical level as your pages directory within the root or src directory.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import NextCors from 'nextjs-cors';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  // Execute the CORS middleware
  await NextCors(req, res, {
    // Configuration options
    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
    origin: '*',
    optionsSuccessStatus: 200,
  });
  return res
}

https://www.npmjs.com/package/nextjs-cors

# Installation using npm
npm install --save nextjs-cors@latest

# Installation using yarn
yarn add nextjs-cors@latest

# Installation using pnpm
pnpm add nextjs-cors@latest

Implementing Custom CORS Logic (without dependencies)

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  const res = NextResponse.next()
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET')
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  )

  // Handling pre-flight requests
  if (req.method === 'OPTIONS') {
    return new NextResponse('ok',{status:200})

  }

  return res
}

Answer 3

Answer №2

After encountering a CORS error with my APIs, I found a workaround by creating a middleware wrapper to handle it:

Here's the code from my utils/middleware.ts file:

import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
import Cors from 'cors'

const corsMiddleware = Cors({
  methods: ['GET', 'OPTIONS', 'HEAD'],
})

const runMiddleware = (
  req: NextApiRequest,
  res: NextApiResponse,
  fn: Function
) => {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

export const withCors =
  (handler: NextApiHandler) =>
  async (req: NextApiRequest, res: NextApiResponse) => {
    await runMiddleware(req, res, corsMiddleware)

    if (req.method === 'OPTIONS') {
      res.status(200).end()
      return
    }

    return handler(req, res)
  }

You can use this middleware in your code like this:

import { NextApiRequest, NextApiResponse } from 'next'
import { connectToDB, paginateCollection, withCors } from '@/utils'

export type House = {
  house: string
  price: string
  timestamp: string
  developer: string
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const page = parseInt(req.query.page as string) || 1
  const perPage = 10

  let houses: House[] = []
  let totalPages = 1

  try {
    const db = await connectToDB()

    const housesCollection = db.collection('foo')

    const { items, totalPages: pages } = await paginateCollection(
      housesCollection,
      page,
      perPage
    )
    totalPages = pages

    houses = items.map((house) => ({
      house: house.house,
      price: house.price,
      timestamp: house.timestamp,
      developer: house.developer,
    }))
  } catch (error) {
    console.error(`Error connecting to MongoDB: ${error}`)
  }

  res.json({ houses, totalPages })
}

export default withCors(handler)

Hopefully, this solution proves useful for others facing similar challenges!

Answer 4

After encountering a CORS error with my APIs, I found a workaround by creating a middleware wrapper to handle it:

Here's the code from my utils/middleware.ts file:

import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
import Cors from 'cors'

const corsMiddleware = Cors({
  methods: ['GET', 'OPTIONS', 'HEAD'],
})

const runMiddleware = (
  req: NextApiRequest,
  res: NextApiResponse,
  fn: Function
) => {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

export const withCors =
  (handler: NextApiHandler) =>
  async (req: NextApiRequest, res: NextApiResponse) => {
    await runMiddleware(req, res, corsMiddleware)

    if (req.method === 'OPTIONS') {
      res.status(200).end()
      return
    }

    return handler(req, res)
  }

You can use this middleware in your code like this:

import { NextApiRequest, NextApiResponse } from 'next'
import { connectToDB, paginateCollection, withCors } from '@/utils'

export type House = {
  house: string
  price: string
  timestamp: string
  developer: string
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const page = parseInt(req.query.page as string) || 1
  const perPage = 10

  let houses: House[] = []
  let totalPages = 1

  try {
    const db = await connectToDB()

    const housesCollection = db.collection('foo')

    const { items, totalPages: pages } = await paginateCollection(
      housesCollection,
      page,
      perPage
    )
    totalPages = pages

    houses = items.map((house) => ({
      house: house.house,
      price: house.price,
      timestamp: house.timestamp,
      developer: house.developer,
    }))
  } catch (error) {
    console.error(`Error connecting to MongoDB: ${error}`)
  }

  res.json({ houses, totalPages })
}

export default withCors(handler)

Hopefully, this solution proves useful for others facing similar challenges!

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Answer №1

Implementing Custom CORS Logic (without dependencies)

Answer №2

Similar questions

Flux Utils identified an issue stating that the Class constructor App cannot be called without the 'new' keyword

Greetings, I am currently utilizing Express along with MongoDb in my project. Every time I attempt to make a post request, I encounter an error message stating that the message (created using

There was a problem with Type TS2507: The Type 'typeof Tapable' cannot be used as a constructor function type

Discovering the current page using ons-navigator in Onsen UI

Sharing data between app.js and client-side files in Node.js: How to do it effectively?

Switch up your Next.js game by altering the Div color of your header based on the active page!

What causes express.Router() to malfunction?

Node Express - Securely storing and accessing authentication tokens

Exploring the Differences Between API Routes and getStaticProps

What could be causing the discrepancy in alignment between a web application running on Mac and Windows using ReactNative?

Is the order of query execution being altered when using the MongoClient in Node.js?

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

A step-by-step guide on assigning values to an Angular Material Auto Complete component in Angular 7

Utilizing React Typescript for Passing Props and Implementing them in Child Components

Using Arrow Functions in Angular 2 Typescript with Support for IE11

Are there any security measures integrated into ExpressJS?

Tips for customizing an image within the antd upload component

The toggle-input component I implemented in React is not providing the desired level of accessibility

Tips for separating provider and input components with React Hook Form

Checking for GitHub API connectivity issues with GitHub can be done by verifying whether the GitHub API is