使用 Axios 连接到后端服务器时，我会收到以下错误“请求失败，状态代码为 404”

Question

所以我正在使用 React 制作一个 Web 应用程序。 所以我创建了一个登录/注册 function 以允许用户注册或登录他们的帐户。 我使用了一个快速服务器将 http 请求发送到 MYSQL 数据库，我还创建了两个端点到“/register”或“/login”。 对于我的前端，我已使用 Axios 将应用程序连接到这些端点，以将用户数据发布到数据库中。 我的应用程序仅在服务器和客户端文件都在同一端口上运行时才工作，当您刷新页面时可能会中断，但是，如果您不刷新页面，该应用程序将完全工作。 所以我的问题是，如果我的前端和后端不在同一端口上运行，我如何才能获得这些 http 请求并将它们发布到我的数据库中。 谢谢：）

前端：

import React, { useState } from "react";
import axios from 'axios';


function Login2() {
    //Saving the values in the form variable
    const [form, setForm] = useState({
        username: '',
        email: '',
        password: '',
    });
    //mode determines whether the form should disply login or register
    const [mode, setMode] = useState('login');
    //message is used to disply any form of error to the user
    const [message, setMessage] = useState('');

    //it updates the users values in case a change has been made 
    //used a spread operator to update the form by targeting .name and .value 
    const handleChange = (e) => {
        setForm({
            ...form,
            [e.target.name]: e.target.value,
        });
    };

    //it is used when the form is submitted, sends message to the backend to either login or register
    //if successful/denied  response is saved in message
    const handleSubmit = (e) => {
        e.preventDefault();
        if (mode === 'login') {
            axios.post('http://localhost:3000/login', form)
                .then((response) => {
                    setMessage(response.data);
                })
                .catch((error) => {
                    setMessage(error.message);
                });
        } else {
            axios.post('http://localhost:3000/register', form)
                .then((response) => {
                    setMessage(response.data);
                })
                .catch((error) => {
                    setMessage(error.message);
                });
        }
    };

    return (
        <div className="App">
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="username"
                    placeholder="Username"
                    value={form.username}
                    onChange={handleChange}
                />
                {mode === 'register' && (
                    <input
                        type="email"
                        name="email"
                        placeholder="Email"
                        value={form.email}
                        onChange={handleChange}
                    />
                )}
                <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    value={form.password}
                    onChange={handleChange}
                />
                <button type="submit">
                    {mode === 'login' ? 'Login' : 'Register'}
                </button>
                <button type="button" onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
                    Switch to {mode === 'login' ? 'Register' : 'Login'}
                </button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
};

export default Login2;

后端：

const express = require('express');
const app = express();

const mysql = require('mysql2');

const connection = mysql.createConnection({
    host: "??",
    user: "??",
    password: "??",
    database: "??",
});

app.use(express.json());

app.post('/register', (req, res) => {
    const { username, email, password } = req.body;
    const reg = `INSERT INTO userTable (username, email, password) VALUES (?,?,?)`;
    connection.query(reg, [username, email, password], (error) => {
        if (error) throw error;
        res.send('User registered successfully');
    });
});

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    const log = `SELECT * FROM userTable WHERE username = ? AND password = ?`;
    connection.query(log, [username, password], (error, results) => {
        if (error) throw error;
        if (!results.length) {
            return res.send('Username or password is incorrect');
        }
        res.send('Login successful');
    });
});

app.listen(4000, () => {
    console.log('Server listening on port 4000');
});

Answer 1

您正在向错误的端口发出发布请求。 您的服务器在 4000 上运行，并且您在端口 3000 上发出 axios post 请求。在您的反应代码中进行以下更改：

axios.post('http://localhost:4000/login', form)

和

axios.post('http://localhost:4000/register', form)

但是由于您是从不同的端口向服务器请求，而不是在它运行的端口上（在您的项目中是 4000），您将收到 CORS 错误。 为此，您需要安装cors package 并根据您的项目进行必要的配置。 希望能帮助到你。