尝试连接到 node.js 中的 localhost:4000/addProduct 时出现“无法获取 /”

Question

I am working with node.js as backend server. When requesting to "localhost:4000/addProduct" I got the error "Cannot GET /addProduct" in the browser but when I request to "localhost:4000" it is showing the output 'Mobile Fair' and I do not know what is the matter. My code is as follows:

 const express = require('express') const app = express() require('dotenv').config() const MongoClient = require('mongodb').MongoClient; const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.ywjyr.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=majority`; const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true }); client.connect(err => { const collection = client.db(process.env.DB_NAME).collection(process.env.DB_COLLECT); app.post('/addProduct', (req, res) => { const newData = req.body; console.log("adding new product: ",newData); }) console.log("you got error: ",err) }); app.get('/', (req, res) => { res.send('Mobile Fair') }) app.use(function( req, res, next){ res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.listen(4000);

My front end code is given below:

 import axios from 'axios'; import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import Admin from '../Admin/Admin'; const AddProduct = () => { const [imageUrl, setImageUrl] = useState(null); const handleImageUpload = (event) => { console.log(event.target.files[0]) const imageData = new FormData(); imageData.set('key', 'key'); imageData.append('image', event.target.files[0]); axios.post('uri', imageData).then(function (response) { console.log(response); setImageUrl(response.data.data.display_url); }).catch(function (error) { console.log(error); }); } const { register, handleSubmit, watch, errors } = useForm(); const onSubmit = data => { const newData = { name: data.name, memory: data.memory, price: data.price, image: imageUrl } console.log(newData); fetch('http://localhost:4000/addProduct', { method: 'POST', // or 'PUT' headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(newData), }).then(res=> console.log("server side response: ",res)) }; return ( <div className="d-flex"> <div><Admin /></div> <div> <form onSubmit={handleSubmit(onSubmit)}> <input name="name" placeholder="Enter Name" ref={register({ required: true })} /> {errors.name && <span>This field is required</span>} <input name="memory" placeholder="Enter Memory" ref={register({ required: true })} /> {errors.memory && <span>This field is required</span>}<br></br> <input name="price" placeholder="Enter Price" ref={register({ required: true })} /> {errors.memory && <span>This field is required</span>} <input name="image" type="file" onChange={handleImageUpload} /><br /> <input type="submit" value="Save" /> </form> </div> </div> ); }; export default AddProduct;

Answer 1

Try this.

fetch(' "localhost:4000/addProduct"', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newData)
}).then(res => res.json())
  .then(res => console.log(res));

Also in order to handle json data you need to parse it. add this line after your

const app = express()
app.use(express.json());

Update: just take your entire app.post code and paste it below that app.get code snippet , remove it from your client.connect callback.

app.get('/', (req, res) => {
    res.send('Mobile Fair')
})

app.post('/addProduct', (req, res) => {
    const newData = req.body;
    console.log("adding  new product: ",newData);
  })    
  console.log("you got error: ",err)