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.
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:
headers
in configuration file, next.config.js
headers
in configuration fileI 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
.
The secondary way I did not use, you can check this link, https://github.com/vercel/next.js/discussions/52933, to figure out.
next/image
Un-configured HostAnother 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: