在 Next.js 中实现 API 跨域（CORS）调用

小Lu的开源日常2024-06-10 11:35

原文：How to Implement CORS for API Routes in Next.js

最近，发布了一个应用：Amazing Endemic Species，可以向其他开发人员提供了一组可用于二次开发的 API。

为了进行测试 API，我在自己的网站 shenlu.me 的 "Not Found" 页面中使用这些 API。然而，当我使用这些 API 时遇到了一些错误。

vbscript 复制代码

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.

目前有两种方法可以解决这个问题：

在配置文件 next.config.js 中定义 CORS 头
创建一个中间件 (middleware.ts) 来处理请求

在配置文件 next.config.js 中定义 CORS 头

我使用了这种方法，并在 Amazing Endemic Species 的 next.config.mjs 文件中进行了如下配置：

csharp 复制代码

const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/v1/:slug",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*", // 设置你的来源
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },
  // 添加其他 Next.js 配置
};

定义中间件（middleware.ts）处理请求

第二种方法我没用，可以自己查看这个连接去配置：github.com/vercel/next...

问题 #2: next/image Un-configured Host

另一个错误是，当我直接将从 aes.shenlu.me/api/v1/rand... 获取的值 aes.shenlu.me/images/**.j... 传递给 src 时出现的。为了解决这个问题，我在 next.config.js 的 images.remotePatterns 中定义了主机名 aes.shenlu.me。

css 复制代码

const nextConfig = {
  // 可选地添加其他 Next.js 配置。
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "aes.shenlu.me",
        port: "",
        pathname: "/images/**",
      },
    ],
  },
};

解决这个问题后，我完成了如下的 "Not Found" 页面：

参考连接

在 Next.js 中实现 API 跨域（CORS） 调用

问题 #1: No 'Access-Control-Allow-Origin' Header

在配置文件 next.config.js 中定义 CORS 头

定义中间件（middleware.ts）处理请求

问题 #2: next/image Un-configured Host

在 Next.js 中实现 API 跨域（CORS）调用