Next.js Discord

Discord Forum

405 Method Not Allowed in API Route

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Morning, I've been burning my brain trying to figure out what's wrong with my API route since yesterday. When I try to make a call to my endpoint (POST), it says method not allowed in the browser's console and returns this page isn't working in the page content. I've got a middleware setup and I'l allowing all methods so I really have no clue what's causing it not to work as expected, my endpoint looks like so:
import { API_PATHS } from '@/utils/api/base';
import { NextResponse } from 'next/server';

export async function POST() {
    var raw = JSON.stringify({
        user: {
            id: 'SAMPLE_USER_ID',
        },
    });

    const res = await fetch(API_PATHS.auth.signin.path, {
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        method: 'POST',
        body: raw,
    });

    const data = await res.json();

    return NextResponse.json(data);
}
Answered by Barbary Lion
i fixed this, i was using POST (function) when I had touse GET but pass POST method in the fetch API
View full answer

5 Replies

Barbary LionOP
My middleware config 
import { appInfo } from '@/common/data/app';
import { Database } from '@/interfaces/database';
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextRequest, NextResponse } from 'next/server';

export async function middleware(req: NextRequest) {
    // Get the value of the 'origin' header from the request
    const origin = req.headers.get('origin');

    // Create a new NextResponse object
    const res = NextResponse.next();

    if (origin === appInfo.domains.dashbaord) {
        // Set the 'Access-Control-Allow-Origin' header to the origin if it matches one of the specified values
        res.headers.set('Access-Control-Allow-Origin', origin);
    } else {
        // Set a default origin for other requests
        res.headers.set('Access-Control-Allow-Origin', appInfo.domains.dashbaord);
    }

    res.headers.set('Access-Control-Allow-Methods', '*'); // Set the allowed HTTP methods
    res.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // Set the allowed request headers
    res.headers.set('Access-Control-Max-Age', '86400'); // Set the maximum age for preflight requests

    // Intiating supabase
    const supabase = createMiddlewareClient<Database>({ req, res });
    await supabase.auth.getSession();

    return res; // Return the modified response
}

export const config = {
    matcher: '/api/:path*', // Define a matcher for the middleware
};
Barbary LionOP
Bumping
tafutada777
can you share more details about error logs such as chrome dev tool network tab and cURL? if you want reply.
@tafutada777 can you share more details about error logs such as chrome dev tool network tab and cURL? if you want reply.
Barbary LionOP
i fixed this, i was using POST (function) when I had touse GET but pass POST method in the fetch API
Answer
tafutada777
it was so clear if you employed cURL command and Chrome Dev Tool.