has been blocked by CORS policy - CORS in Next.js

[nicitaacom]

Problem

Solution

project 2 (3001)

api/test/route.ts

import { NextApiRequest, NextApiResponse } from "next"
import { NextResponse } from "next/server"

export async function OPTIONS(req: NextApiRequest, res: NextApiResponse) {
  return NextResponse.json({}, { status: 200 })
}

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  console.log(4, "req.method - ", req.method)

  return NextResponse.json({}, { status: 200 })
}

project 2 (3001)

middleware.ts

import { NextResponse, type NextRequest } from "next/server"

const corsOptions: {
  allowedMethods: string[]
  allowedOrigins: string[]
  allowedHeaders: string[]
  exposedHeaders: string[]
  maxAge?: number
  credentials: boolean
} = {
  allowedMethods: (process.env?.ALLOWED_METHODS || "").split(","),
  allowedOrigins: (process.env?.ALLOWED_ORIGIN || "").split(","),
  allowedHeaders: (process.env?.ALLOWED_HEADERS || "").split(","),
  exposedHeaders: (process.env?.EXPOSED_HEADERS || "").split(","),
  maxAge: (process.env?.MAX_AGE && parseInt(process.env?.MAX_AGE)) || undefined, // 60 * 60 * 24 * 30, // 30 days
  credentials: process.env?.CREDENTIALS == "true",
}

// Middleware
// ========================================================
// This function can be marked `async` if using `await` inside
export async function middleware(request: NextRequest) {
  // Response
  const response = NextResponse.next()

  // Allowed origins check
  const origin = request.headers.get("origin") ?? ""
  if (corsOptions.allowedOrigins.includes("*") || corsOptions.allowedOrigins.includes(origin)) {
    response.headers.set("Access-Control-Allow-Origin", origin)
  }

  // Set default CORS headers
  response.headers.set("Access-Control-Allow-Credentials", corsOptions.credentials.toString())
  response.headers.set("Access-Control-Allow-Methods", corsOptions.allowedMethods.join(","))
  response.headers.set("Access-Control-Allow-Headers", corsOptions.allowedHeaders.join(","))
  response.headers.set("Access-Control-Expose-Headers", corsOptions.exposedHeaders.join(","))
  response.headers.set("Access-Control-Max-Age", corsOptions.maxAge?.toString() ?? "")

  // Return
  return response
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: "/api/:path*",
}

project 2 (3001)

.env.local

ALLOWED_METHODS="GET, HEAD, PUT, PATCH, POST, DELETE, OPTIONS"
ALLOWED_ORIGIN="https://outreach-tool.online,http://localhost:3000"
ALLOWED_HEADERS="Content-Type, Authorization, X-Forwarded-For"
EXPOSED_HEADERS=""
MAX_AGE="86400" # 60 * 60 * 24 = 24 hours
CREDENTIALS="true"
DOMAIN_URL="http://localhost:3001"

I'm doing request from project 1 (3000) to project 2 (3001) like this

  const response = await fetch(`http://localhost:3001/api/test`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Forwarded-For": "http://localhost:3000",
    },
    body: JSON.stringify({ env, userId, secretKey }),
    cache: "no-cache",
  })

[nicitaacom]

Also make sure to disable proxy