1. Introduction

If you’ve ever worked with Next.js API routes and encountered a CORS error, you know how frustrating it can be. The “Cross-Origin Resource Sharing (CORS) error” occurs when a web page tries to make a request to a different domain (or origin) than the one that served the page. This is a browser security feature that helps prevent malicious websites from making unauthorized requests.

In this guide, we’ll cover everything you need to know about fixing CORS errors in Next.js API routes, including why they occur and how to resolve them effectively.

---

2. Understanding CORS (Cross-Origin Resource Sharing)

CORS is a security mechanism implemented by browsers to restrict cross-origin requests. It ensures that a web page hosted on domainA.com cannot directly make requests to domainB.com unless the latter explicitly allows it.

How CORS Works

When a browser detects a cross-origin request:

1. It sends a preflight request (OPTIONS method) to check whether the server allows the request.

2. If the server responds with the correct headers, the actual request is sent.

3. If the server does not return the required headers, the browser blocks the request, causing a CORS error.

---

3. Why CORS Errors Occur in Next.js API Routes

By default, Next.js API routes follow the same-origin policy, meaning they only accept requests from the same domain. If your frontend (example.com) tries to fetch data from a Next.js API route (api.example.com), the browser might block the request unless CORS headers are correctly set.

Common causes include:

• Missing Access-Control-Allow-Origin header

• API route not handling OPTIONS requests

• Incorrect CORS configuration

---

4. How to Identify CORS Errors in Next.js

To troubleshoot CORS errors, you should:

• Check the browser console (F12 → Console) for error messages like:

Access to fetch at 'https://api.example.com/data' from origin 'https://example.com' has been blocked by CORS policy.

• Inspect network requests (DevTools → Network tab) to see response headers.

• Review API server logs to identify missing headers.

---

5. Fixing CORS Errors in Next.js API Routes

There are multiple ways to fix CORS errors in Next.js:

1. Set CORS headers manually in API routes

2. Use next.config.js to modify response headers globally

3. Install and configure the cors package

Let’s explore each method in detail.

---

6. Implementing CORS Headers in Next.js API Routes

To manually set CORS headers in an API route, update your API function like this:

export default function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

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

  res.status(200).json({ message: 'CORS headers set' });
}

---

7. Using the next.config.js File for CORS Handling

Another way to enable CORS globally is by modifying next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' },
        ],
      },
    ];
  },
};

---

8. Installing and Using the cors Package in Next.js

For more flexibility, install the cors package:

npm install cors

Then, create a middleware function:

import Cors from 'cors';

const cors = Cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
});

export default function handler(req, res) {
  return new Promise((resolve) => {
    cors(req, res, () => {
      res.status(200).json({ message: 'CORS enabled' });
      resolve();
    });
  });
}

---

9. Conclusion

Fixing CORS errors in Next.js API routes is crucial for ensuring smooth communication between your frontend and backend.

Key Takeaways:

• ✅ Add CORS headers manually in API responses.
• ✅ Use next.config.js for global CORS handling.
• ✅ Use the cors package for better flexibility.
• ✅ Handle OPTIONS requests properly.
• ✅ Secure API requests by allowing only trusted origins.

---

FAQs

1. Why is my Next.js API blocked by CORS?

Your API is missing the required CORS headers, causing the browser to block the request.

2. How do I fix CORS in Next.js API routes?

Set CORS headers manually, modify next.config.js, or use the cors middleware.