Next.js & Axios:不允许删除方法405方法
Next.js & Axios:不允许删除方法405方法
提问于 2022-06-15 14:46:31
我正在用Next.js在我的应用程序中构建迷你论坛功能。论坛有一个功能，你可以删除你的论坛帖子，如果你是作者。我尝试使用HTML和axios.delete发出一个删除请求。它正确地命中了API端点，令人惊讶地执行了delete (从数据库中)，但是给出了一个不允许405方法的错误。我已经阅读并应用了在Vercel Docs中所写的关于这个问题的内容，但没有结果。代码如下
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;
}
}
}
Stack Overflow用户
发布于 2022-06-16 14:39:25
弄明白了。结果，我无法使用delete方法在API文件夹中重定向，因为这会导致一个奇怪的405错误。因此，我所做的只是what端点中的res.status(200).send("")和重定向的前端组件中的router.push("/school-forum")。
...
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;
}
...
然后删除res.redirect("http://localhost:3000/school-forum");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72633474
复制相关文章
相似问题
腾讯云开发者
