html - 我无法访问 POST，而是获取 GET

问题描述

最近我决定学习一些新东西，我遇到了 NodeJS 和 ReactJS，我很高兴能够学习它们。但有件事我需要帮助。在服务器端，我安装了一些包，如 MySQL、body-parser、nodemon、express 和 cors。我希望前端与后端服务器进行通信。在我重新安装 Windows 10 之前，它运行良好。现在，当我在服务器端创建一个 POST 函数并尝试在前端使用 Axios 执行它时，我得到了这个值：

Cannot GET /api/register/

在我重新安装 Windows 之前，我没有在我的项目中使用任何表单标签，它运行良好。那么为什么有 GET 而不是 POST？我什至跟着这个教程

https://www.youtube.com/watch?v=3YrOOia3-mo（该系列的所有三个部分）

后端代码：

const express = require('express')
const app = express()
const mysql = require('mysql')
const bodyParser = require('body-parser')
const cors = require('cors')


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());    //Allow not to encounter errors


const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydtb'
})

app.post('/api/register/', (req, res) => {
    const userN = req.body.user;
    const passW = req.body.pass;
    const sql = "INSERT INTO users (username, password) VALUES (?,?)";

    db.query(sql, [userN, passW], (err, result) =>{
        res.send(result);
        console.log(res);
    });
});

app.post('/api/values/', (req, res) => {

    const sql = "INSERT INTO users (username, password) VALUES ('lucashello','ma45sd4ye')";
    db.query(sql, (err, result) =>{
        res.send(result);
    });
});


app.get('/api/get', (req, res) => {

    const sql = "SELECT * FROM users";
    db.query(sql, (err, result) => {
        res.send(result);
    });
});

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

前端（仅重要部分代码）：

Axios.post('http://localhost:3001/api/register/', {user: username, pass: password}).then(()=>{
          
          setErrorArray(['Successfully registered!'])
          setErrorText(errorArray.map((arr) => {
            return <div key={arr} style={{color: 'green'}}>{arr}</div>
          }))
    })

return (
    <div className="App">
        <div className="login-form">
            <h1>Register</h1>
            <label htmlFor="username">Username:</label><br/>
            <input type="text" name="username" onChange={(e) => {setUsername(e.target.value)}}/><br/>
            <label htmlFor="password">Password:</label><br/>
            <input  type="password" name="password" onChange={(e) => {setPassword(e.target.value)}}/><br/>
            <label htmlFor="repeat-password">Repeat password:</label><br/>
            <input type="password" name="repeat-password" onChange={(e) => {setPasswordRepeat(e.target.value)}}/><br/>
            <span><button onClick={submitForm} className="button">Register</button> You can log in here</span><br/>
            {errorText}
        </div>
    </div>
  );

我的数据库运行良好，我对其进行了测试。我认为即使表单中的函数也是正确的。我是否遗漏了什么？请帮帮我，这样如果再次发生，我可以知道如何解决这个问题。

标签： htmlnode.jsreactjsexpressaxios

如果您可以通过 POSTMAN 或 INSOMNIA 毫无问题地进行后端调用，您的代码对我来说看起来不错

值得尝试在前端 package.json 中添加代理：

"proxy": "http://127.0.0.1:<backend port>"

在您的 App.js 中做出反应后，导入不带大写“A”的 axios：

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

并将帖子发布到您的后端，如下所示：

axios.post("/api/register", ...)

html - 我无法访问 POST，而是获取 GET

问题描述

解决方案

推荐阅读