Next.js & Axios: Delete Method 405 Method Not Allowed - http

Question

I'm building mini forum feature in my app using Next.js. The forum has a feature where you can delete your forum post if you are the author. I try to make a delete request using the HTML form and axios.delete. It hits the API endpoint properly and surprisingly executes the delete (from a database) yet gives out an error that says 405 Method Not Allowed. I have already read and applied what is written in the Vercel Docs regarding this issue but to no avail. Code below
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
// typescript: true,
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "http://localhost:3000" },
{
key: "Access-Control-Allow-Methods",
value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
},
{
key: "Access-Control-Allow-Headers",
value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
};
module.exports = nextConfig;
school-forum/[id].tsx
import React, { useState, useEffect } from "react";
import axios from "axios";
import styles from "./index.module.css";
interface Props {
currentId: number;
}
const ButtonOptions: React.FC<Props> = ({currentId}) => {
const thisAPI: string = `/school-forum/${currentId}`;
async function handleDelete(): Promise<void> {
await axios.delete(thisAPI, {
data: {
currentId,
},
});
return void 0;
}
return (
<>
...
<div>
<form
className={styles.optionForms}
onSubmit={handleDelete}
>
<h2 className={styles.optionH2Header}>Option Delete</h2>
<hr className="horizontalRuleYellow" />
<b className={styles.deleteMessage}>
Notice: This action cannot be reversed
</b>
<p className={styles.deleteMessage}>
Are you sure you want to proceed to deletion?
</p>
<hr className="horizontalRuleYellow" />
<div className={styles.optionButtons}>
<button type="submit">Execute Option</button>
</div>
</form>
</div>
</>
);
};
export default ButtonOptions;
api/school-forum/[id].tsx
import { NextApiRequest, NextApiResponse } from "next";
import dbExecute from "../../../_operations/db/db";
export default async function (
req: NextApiRequest,
res: NextApiResponse
): Promise<void> {
if (req.method === "DELETE") {
try {
const { currentId } = req.body;
res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
res.setHeader(
'Access-Control-Allow-Headers',
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
)
const sql: string = `
DELETE FROM forum_question_table
WHERE question_id = ?;`;
await dbExecute(sql, [currentId]);
// this executes but errors
res.redirect("http://localhost:3000/school-forum");
return void 0;
} catch (error: unknown) {
console.log(error);
console.log("error");
res.status(500).redirect("http://localhost:3000/500");
return void 0;
}
}
}

Answer 1

Figured it out. Turns out I can't redirect in the API folder with a delete method since that results in a weird 405 error. So what I did is just res.status(200).send("") in the hitted API endpoint and router.push("/school-forum") in the front end component for the redirect.
...
const ButtonOptions: React.FC<Props> = ({currentId}) => {
const thisAPI: string = `/school-forum/${currentId}`;
async function handleDelete(): Promise<void> {
await axios.delete(thisAPI, {
data: {
currentId,
},
});
router.push("/school-forum")
return void 0;
}
...
then remove res.redirect("http://localhost:3000/school-forum");