Enabling CORS for all API routes

With NextJS API routes, CORS can be handled directly within the application codebase. By implementing CORS logic within API route handlers, developers can control access to these routes based on origin. This approach streamlines maintenance by integrating CORS management into the application itself, reducing the need for separate server configurations.

In the API routes integration approach, CORS headers are set directly within the API route handler. This allows fine-grained control over CORS policy for specific routes. Preflight requests (OPTIONS) are also handled to support CORS preflight requests.

Install micro-cors package with following command in your sever forlder.

npm i micro-cors

We will implement CORS middleware to apply CORS across all API routes effectively.

JavaScript

// pages/api/middlware/cors.js

import Cors from 'micro-cors';

// Initialize CORS middleware
const cors = Cors({
    origin: '*', // Allow requests from any origin
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    // Allow specific HTTP methods
});

export default cors;

Import the CORS middleware into the API routes and apply it to each route as middleware.

JavaScript

// pages/api/sendmessage.js

import cors from "./middlware/cors";

// Handle the API route
export default async function handler(req, res) {
    // Run the cors middleware
    await cors(req, res);

    // Handle the GET request to /api/sendmessage
    if (req.method === "GET") {
        res.status(200).json({ message: "Hello from the API route!" });
    } else {
        // If the request method is not GET, return a 405 Method Not Allowed status
        res.setHeader("Allow", ["GET"]);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
}

cors api route

If we modify the allowed origin in our API route, we will encounter CORS errors due to a mismatch between the origin specified in the request and the origin allowed by the server’s CORS policy.

cors error if the origin allowed changed.

How to use CORS in Next.js to Handle Cross-origin Requests ?

NextJS simplifies server-side logic with its API routes, reducing the need for separate server maintenance. CORS, usually configured on the server, can be handled within NextJS API routes directly. These routes, integrated into the application codebase, allow control over request origins. By implementing CORS in API routes, NextJS ensures secure and controlled access to server resources. This approach aligns with NextJS’s server-side rendering capabilities. Developers benefit from reduced complexity and streamlined maintenance.

NextJS emerges as a favorable framework for building applications with server-side rendering needs. Its integration of CORS management within API routes enhances security and flexibility. This model offers a unified solution for both client and server-side needs, promoting efficient development practices.

We Will discuss the different approaches to handling cross-origin requests using NextJS:

Table of Content