向 MongoDB 发送删除请求时连接被拒绝

Question

我一直在学习有关 Next.js 的教程，该教程与 MongoDB 一起使用。通过 Postman 发送时，我的所有请求都工作正常，表明我的 API 正在按预期工作。我可以毫无问题地从 Postman 发送 POST、GET 和 DELETE 请求。

但是，当我通过按钮调用的函数发送 DELETE 请求时，我收到 ERR_CONNECTION_REFUSED 错误，没有任何其他信息。有人可以指出我在这里做错了什么吗？

这是代码

如您所见，我有一个更新按钮和一个删除按钮，分别用于生成控制台日志和调用函数。但是，更新按钮的 onClick 未触发，删除按钮的 onClick 在单击时出现连接被拒绝错误。

import axios from "axios"
import { useState } from "react"

export default function Index({ products }) {

    const [productList, setProductList] = useState(products)

    const handleDelete = async (id) => {
        try {
            const res = await axios.delete("http://localhost:3000/api/products/" + id)
            setProductList(productList.filter((product) => product._id !== id))
        } catch (error) {
            console.log(error)
        }
    }

    return (
        <div className="container">
            <h1 className="display-3 text-center my-5">Admin Dash</h1>
            <div className="d-flex justify-content-center">
                <div className="col-md-4">
                    <form action="">
                        <div className="my-3">
                            <label htmlFor="productName" className="form-label">Enter Product Name</label>
                            <input type="text" name="productName" className="form-control" id="productName" />
                        </div>
                        <div className="my-3">
                            <label htmlFor="productDesc" className="form-label">Enter Product Description</label>
                            <input type="text" name="productDesc" className="form-control" id="productDesc" />
                        </div>
                        <div className="my-3">
                            <label htmlFor="productPrice" className="form-label">Enter Product Price</label>
                            <input type="number" name="productPrice" className="form-control" id="productPrice" />
                        </div>
                        <div className="my-3 d-flex justify-content-center">
                            <button className="btn btn-primary btn-lg me-3">Upload Image</button>
                            <button className="btn btn-success btn-lg">Add Product</button>
                        </div>
                    </form>
                </div>
            </div>
            <hr />
            <div className="d-flex flex-column align-items-center">
                <h1 className="display-3 my-3">Listed Products</h1>
                <table className="table table-striped mb-5">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Product Name</th>
                            <th scope="col">Product Description</th>
                            <th scope="col">Product Price</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {productList.map(product => (
                            <tr  key={product._id}>
                                <th scope="row">{product._id}</th>
                                <td>{product.title}</td>
                                <td>{product.desc}</td>
                                <td>{product.prices[0]}</td>
                                <td>
                                    <button className="btn btn-warning me-3" onClick={() => console.log("Test")}>Update</button>
                                    <button className="btn btn-danger" onClick={() => handleDelete(product._id)}>Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export const getServerSideProps = async () => {
    const productsList = await axios.get("http://localhost:3000/api/products")

    return {
        props: {
            products: productsList.data
        }
    }
}

为了更好地衡量，这里还有 API 端点代码。

import dbConnect from "../../../lib/dbConnect"
import Product from "../../../models/Product"

export default async function handler(req, res) {
    const { method, query:{ id} } = req

    dbConnect()
    
    if (method === "GET"){
        try {
            const product = await Product.findById(id)
            res.status(200).json(product)
        } catch (error) {
            res.status(500).json(error)
        }
    }

    if (method === "POST"){
        try {
            const product = await Product.create(req.body)
            res.status(200).json(product)
        } catch (error) {
            res.status(500).json(error)
        }
    }

    if (method === "DELETE"){
        try {
            await Product.findByIdAndDelete(id)
            res.status(200).json("Product Deleted!")
        } catch (error) {
            res.status(500).json("Problem here")
        }
    }
}

Answer 1

所以经过一整夜的敲打我的脑袋，我弄清楚了问题出在哪里。在我的 handleDelete 函数中，以下行

const res = await axios.delete("http://localhost:3000/api/products/" + id)

将更改为：

const res = await axios.delete("http://internalIPhere:3000/api/products/" + id)

我的猜测是问题源于我运行我的虚拟机上的开发服务器并从主机 OS 访问它。由于 localhost 地址未在我的浏览器中解析，因此它无法到达 API 端点。我用虚拟机的 IP 替换 localhost 后，一切正常。

向 MongoDB 发送删除请求时连接被拒绝

Connection refused when sending delete request to MongoDB

javascript

mongodb

twitter-bootstrap

next.js