向MongoDB發送洗掉請求時連接被拒絕

我一直在關注與 MongoDB 一起使用的 Next.js 教程。通過 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")
        }
    }
}

uj5u.com熱心網友回復：

因此，在敲了整整一夜的頭之后，我弄清楚了問題所在。在我的handleDelete函式中，以下行

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

將更改為：

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

我的猜測是，問題源于我在虛擬機上運行我的開發服務器并從主機作業系統訪問它。由于localhost地址未在我的瀏覽器中決議，因此無法訪問 API 端點。一旦我更換localhost了虛擬機的 IP，一切正常。

標籤：javascript mongodb 推特引导 下一个.js

上一篇：JqueryOnclick函式不適用于第二個資料表的其他頁面

下一篇：如何在SQL連接中應用max函式