我正在构建一个简单的react应用程序,但我的数据没有发送到数据库,错误是axios错误:控制台中的网络错误错误错误是net::ERR_CONNECTION_REFUSED,我已经挣扎了一个星期请帮助。im使用mern技术im使用端口3000和8071为后端
`我的server.js
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
const dotenv = require("dotenv");
const app = express();
require("dotenv").config();
const PORT = process.env.PORT || 8071;
app.use(cors());
app.use(bodyParser.json());
const URL = process.env.MONGODB_URL;
mongoose.connect(URL, {
useNewUrlParser: true,
});
const connection = mongoose.connection;
connection.once("open", () => {
console.log("Mongodb Connection success!");
})
const supplierRouter = require("./routes/suppliers.js");
app.use("/supplier", supplierRouter);
app.listen(PORT, () => {
console.log(`Server is up and running on port: ${PORT}`)
})
我的Addsupplier.js
import AdminDashBoard from "./AdminDashBoard";
import axios from "axios";
export default function AddSupplier(){
const [supplierName, setSupplierName] = useState("");
const [address, setAddress] = useState("");
const [contactNumber, setContactNumber] = useState("");
const [email, setEmail] = useState("");
function sendData(e){
e.preventDefault();
const newSupplier = {
supplierName,
address,
contactNumber,
email
}
axios.post("http://localhost:8071/supplier/add", newSupplier).then(()=>{
alert("Supplier Added")
}).catch((err)=> {
alert(err)
})
}
return(
<div>
<AdminDashBoard></AdminDashBoard>
<div className="container">
<form onSubmit={sendData}>
<div className="form-group">
<label for="supplierName">Supplier Name</label>
<input type="text" className="form-control" id="supplierName" placeholder="Enter Supplier Name"
onChange={(e)=>{
setSupplierName(e.target.value);
}} />
</div>
<div className="form-group">
<label for="address">Supplier Address</label>
<input type="text" className="form-control" id="address" placeholder="Enter Supplier Address"
onChange={(e)=>{
setAddress(e.target.value);
}} />
</div>
<div className="form-group">
<label for="contactNumber">Contact Number</label>
<input type="text" className="form-control" id="contactNumber" placeholder="Enter Contact Number"
onChange={(e)=>{
setContactNumber(e.target.value);
}} />
</div>
<div className="form-group">
<label for="email">Supplier email</label>
<input type="text" className="form-control" id="email" placeholder="Enter Supplier email"
onChange={(e)=>{
setEmail(e.target.value);
}} />
</div>
<button type="submit" className="btn btn-primary">Insert Data</button>
</form>
</div>
</div>
)
}
1条答案
按热度按时间pcww981p1#
对于这个路径(http://localhost:8071/supplier/add)首先尝试与postman建立连接。如果它从postman工作,然后尝试与Frontend连接,这里你没有添加supplier.js,所以我不能肯定回答有关API的问题。但从前端的Angular 来看,你需要交叉检查后端连接,只有当后端工作正常时才能工作。