How to Implement CORS for API Routes in Next.js

Recently I published Amazing Endemic Species, a Species-as-a-Services application, which provides other developers with a set of APIs being used in secondary development.

For testing, I plan to use these APIs in Not Found page of shenlu.me. However, I met some error when I used these APIs.

Problem #1: No 'Access-Control-Allow-Origin' Header

Access to fetch at 'http://aes.shenlu.me/api/v1/random' from origin 'http://localhost:1200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

There are two ways to solve this problem:

• 1. Define CORS in headers in configuration file, next.config.js
• 2. Create a middleware to handle the request

1. Define CORS in headers in configuration file

I used this method and configure next.config.mjs in Amazing Endemic Species like below.

const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/v1/:slug",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*", // Set your origin
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },
  // Optionally, add any other Next.js config below.
};

After this configuration, shenlu.me in local, https://localhost:3000, will normally get the data from API service, https://aes.shenlu.me/api/v1/random.

2. Create a middleware to handle the request

The secondary way I did not use, you can check this link, https://github.com/vercel/next.js/discussions/52933, to figure out.

Problem #2: next/image Un-configured Host

Another error I got is when I directly passed https://aes.shenlu.me/images/**.jpg, the value get from http://aes.shenlu.me/api/v1/random, to src. To solve this problem, I defined hostname, aes.shenlu.me, in the images.remotePatterns in next.config.js.

const nextConfig = {
  // Optionally, add any other Next.js config below.
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "aes.shenlu.me",
        port: "",
        pathname: "/images/**",
      },
    ],
  },
};

After solving this problem, I finished the Not Found page as below:

Related Issues

• https://github.com/shenlu89/amazing-endemic-species/issues/13
• https://github.com/shenlu89/amazing-endemic-species/issues/12
• https://github.com/shenlu89/shenlu.me/issues/28

References

• https://nextjs.org/docs/app/api-reference/next-config-js/headers
• https://github.com/vercel/next.js/discussions/52933
• https://nextjs.org/docs/messages/next-image-unconfigured-host