Как исправить ошибку GET http://localhost: 4000 / contacts 404 (Not Found)

Question

Я пытаюсь отобразить список контактов, но уверен, что делаю что-то не так. Я просто вижу это.

Вот ошибка, которую я получаю

xhr.js:173 GET http://localhost:4000/contacts 404 (Not Found)

Вот мой contacts-list.component.js:

import React , { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';


const Contact = props => (
    <tr>
        <td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.first_name}</td>
        <td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.last_name}</td>
        <td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.email}</td>
        <td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.mobile}</td>
        <td>
            <Link to={"/edit/" + props.contact._id}>Edit</Link>
        </td>
    </tr>
)


export default class ContactsList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            contacts: []
        };
    }

    componentDidMount() {
        axios.get('http://localhost:4000/contacts')
            .then( res => {
                this.setState({
                    contacts: res.data
                })
            })
            .catch( err => console.log(err));
    }

    componentDidUpdate() {
        axios.get('http://localhost:4000/contacts')
            .then( res => {
                this.setState({
                    contacts: res.data
                })
            })
            .catch( err => console.log(err));
    }

    contactList = () => this.state.contacts.map(
        (contact, index) => <Contact contact={contact} key={index} />
    )


    render() {
        return (
            <div>
                <h3>Contacts List</h3>
                <table className="table table-striped" style={{ marginTop: 20}}>
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.contactList() }
                    </tbody>
                </table>
            </div>
        )
    }
}

Я думаю, что проблема заключается в где-то в файле списка контактов или в моем server.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const contactRoutes = express.Router();
const PORT = 4000;
let Contact = require('./contact.model');

const app = express();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect(/* database url */, { useNewUrlParser: true });
const connection = mongoose.connection;

// Once the connection is established, callback
connection.once('open', () => {
    console.log("MongoDB database connection established successfully");
});

contactRoutes.route('/').get( (req,res) => {
    Contact.find((err, contacts) => {
        if(err)
            console.log(err);
        else {
            res.json(contacts);
        }
    });
});

contactRoutes.route('/:id').get((req,res) => {
    const id = req.params.id;
    Contact.findById(id, (err,contact) => {
        res.json(contact);
    });
});

contactRoutes.route('/add').post((req,res) => {
    const contact = new Contact(req.body);
    contact.save()
        .then( contact => {
            res.status(200).json({'contact': 'contact added successfully'});
        })
        .catch( err => {
            res.status(400).send('adding new contact failed');
        });
});

contactRoutes.route('/update/:id').post((req,res) => {
    Contact.findById(req.params.id, (err, contact) => {
        if(!contact)
            res.status(404).send('Data is not found');
        else {
            contact.first_name = req.body.first_name;
            contact.last_name = req.body.last_name;
            contact.email = req.body.email;
            contact.mobile = req.body.mobile;
            contact.save().then( contact => {
                res.json('contact updated');
            })
            .catch( err => {
                res.status(400).send("Update not possible");
            });
        }
    });
});

app.use('/contact', contactRoutes);

app.listen( PORT, () => {
    console.log("Server is running on port " + PORT);
});

Ошибка исходит от localhost:4000, но я не понимаю, почему это происходит. В моей консоли написано, что мой бэкэнд работает.

Может кто-нибудь помочь мне объяснить, что я делаю неправильно, и помочь найти решение?

Answer 1

Ваш бэкэнд имеет /contact, а не /contacts

Answer 2

Речь идет не о вашем коде реакции. Это касается вашего бэкэнда. Ваш бэкэнд может быть;

1. Не работает
2. Работает в другом порту
3. Нет конечной точки GET в URL: PORT / contacts

Скопируйте и вставьте ссылку в ваш браузер. Если вы не получили никакого ответа в браузере, то это определенно касается вашего бэкэнда. Итак, вы должны показать свой бэкэнд-код.

РЕДАКТИРОВАТЬ 1

В вашем бэкэнде вы указали маршрут как

app.use('/contact', contactRoutes);

Но вы должны

app.use('/contacts', contactRoutes);