axios 发送 404 错误可能的原因或解决方法？

如何解决axios 发送 404 错误可能的原因或解决方法？

嘿，我对 MERN 堆栈非常陌生，我在使用 Axios 和 express 发布数据时遇到了问题。我可能理解错误，但这是我的问题。我在页面上有一个表单，我试图将数据从后端提交到后端，然后我在那里控制台记录它。该页面是一个包含 onsubmit 函数的组件，它向 server.js 发送一个 post 请求，然后在 console.logs 中记录它，但是我在提交时遇到了 ERROR 404。应该正确安装依赖

这是我的提交功能

    onSubmit(e) {
        e.preventDefault();
        
        console.log(`Form submitted:`);
        console.log(` ${this.state.searchquery}`);
        
        const newSearchQuery = {
            searchquery: this.state.searchquery,};

        axios.post('http://localhost:3000/',newSearchQuery)
            .then(res => console.log(res.data)).then( 
                (response) => { console.log(response) },(error) => { console.log(error) }
            );;
        
        this.setState({
            searchquery: '',})
    }

这是 server.js 文件

const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;


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


todoRoutes.route('/').post(function(req,res) {
    console.log(req.body);
});

app.listen(PORT,function() {
    console.log("Server is running on Port: " + PORT);
});```

解决方法

应用程序未配置为使用路由，这就是它抛出 404 的原因。

在 todoRoutes.Route() 之后使用这一行：

app.use(todoRoutes);

app.use() 用于向主节点应用程序注册中间件。由于您使用的是 router express 中间件，因此您也需要注册它。

编辑：这对我有用。如果您想要完整的代码：

ReactJS：

import React from "react";
import axios from 'axios';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchquery: ''
    };
  }
  handleChange = (e) => {
    this.setState({ searchquery: e.target.value });
  }
  onSubmit = (e) => {
    e.preventDefault();
    
    console.log(`Form submitted:`);
    console.log(` ${this.state.searchquery}`);
    
    const newSearchQuery = {
        searchquery: this.state.searchquery,};

    axios.post('http://localhost:3000/',newSearchQuery)
        .then(res => console.log(res.data)).then( 
            (response) => { console.log(response) },(error) => { console.log(error) }
        );;
    
    this.setState({
        searchquery: '',})
  }
  render() {
    return (<form onSubmit={this.onSubmit}>
      <input type="text" value={this.state.searchquery} name="searchquery" id="searchquery" onChange={this.handleChange} />
      <button type="submit">Submit</button>
    </form>);
  }
}

export default App;

快递代码：

const express = require("express");
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;


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


todoRoutes.route('/').post(function(req,res) {
    console.log(req.body);
});

app.use(todoRoutes);

app.listen(PORT,function() {
    console.log("Server is running on Port: " + PORT);
});