Die Next.js 15 App Router-API-Route gibt 405 zurück, wenn die Backend-API als Proxy verwendet wird, um CORS zu vermeiden ⇐ JavaScript

[Anonymous]

Next.js 15 App Router – CORS-Fehler mit Backend-API und 405-Methode auf Proxy-API-Route nicht zulässig
Ich integriere eine Backend-API in eine Next.js 15 (App Router)-Anwendung.
Die Backend-API funktioniert korrekt, wenn sie mit Postman getestet wird, aber wenn ich versuche, sie direkt aus dem Browser aufzurufen, schlägt sie aufgrund eines CORS-Fehlers fehl (die Antwort enthält keine Access-Control-Allow-Origin-Header).
Da ich keine Kontrolle über die Backend-CORS-Konfiguration habe, habe ich versucht, dies zu umgehen, indem ich eine Next.js-API-Route als Proxy für die Anfrage erstellt habe.
Beim Aufrufen der Next.js-API-Route erhalte ich jedoch den Fehler 405 „Methode nicht zulässig“.
Backend-API
Der Backend-Endpunkt funktioniert einwandfrei im Postboten:

Code: Select all

POST https://example-backend.com/api/verify/

Next.js API Route (Proxy)
Dateispeicherort:

Code: Select all

app/api/verify/route.ts

Code: Select all

import { NextResponse } from 'next/server'

const BACKEND_URL = 'https://example-backend.com'

export async function POST(req: Request) {
try {
const body = await req.json()

const response = await fetch(`${BACKEND_URL}/api/verify/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: JSON.stringify(body),
})

const data = await response.json()

return NextResponse.json(data, { status: response.status })
} catch (error) {
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
)
}
}

Frontend-Aufruf
Von der Client-Komponente aus rufe ich die API-Route wie folgt auf:

Code: Select all

await axios.post('/api/verify/', {
phone_number: phone.trim(),
})

Fehler
Auf der Registerkarte „Netzwerk“ des Browsers wird Folgendes angezeigt:

Code: Select all

Request URL: http://localhost:3000/api/verify
Request Method: POST
Status Code: 405 Method Not Allowed

Antworttext:

Code: Select all

{
"detail": "Method \"GET\" not allowed."
}
```