CORS 问题：Next.js API 无法通过 .com 域访问，但可以通过 vercel.app 域运行

Question

我在尝试从 React 前端访问公共 Next.js API 服务器时遇到 CORS（跨源资源共享）问题。设置如下：

我的 Next.js API 服务器托管在域“immybro.com”上。 使用 React 构建的前端是单独托管的。 当我使用域“immybro.com”从前端发出请求时，我始终面临错误：“已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不允许重定向”飞行前请求。” 令人惊讶的是，当我从“immybro.vercel.app”（我的 Next.js 应用程序的 Vercel 部署域）发出相同的请求时，一切都运行良好，没有任何 CORS 问题。 我已确保 CORS 在服务器端正确配置，以允许来自“immybro.com”等来源的请求，但似乎 CORS 策略会专门阻止从该域发出的这些请求。

我的 CORS 配置中是否缺少某些内容？为什么来自“immybro.com”的请求会被阻止，而来自“immybro.vercel.app”的请求却被毫无问题地接受？任何有关解决此 CORS 问题的见解或指导将不胜感激！

我的 nextconfig.js 文件

/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                // matching all API routes
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept,Authorization, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
                ]
            }
        ]
    }
}

module.exports = nextConfig

我的中间件文件

export async function middleware(request: NextRequest): Promise<NextResponse> {
  // Check if the request path starts with "/api/auth" or "/api/admin"


  if (request.nextUrl.pathname.startsWith("/api/auth") || request.nextUrl.pathname.startsWith("/api/admin")) {
    if (request.method === "OPTIONS") {
      return NextResponse.json({}); // Handle preflight OPTIONS request
    }

Answer 1

希望这会有所帮助

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/(.*)",
        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",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;