node.js - 我不明白为什么我的 axios 发布请求不起作用 - 找不到 404

Question

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

export default class CreateDog extends Component {
    constructor(props){
        super(props)

        this.state = {

            name: '',
            activityLevel: '',
            description: ''
        }
        this.newDog = this.newDog.bind(this)
    }

newDog() {

    var doggy = {
        name: this.state.name,
        activityLevel: this.state.activityLevel,
        description: this.state.description
    }

     axios.post('http://localhost:3002/api/createdog', doggy)
        .then(response => {
            console.log("sent successfully")
        })
    }

render(){
    return(
        <div>
            <div>
                <textarea type="text" placeholder="dog breed name" onChange={(e) => this.setState({name: e.target.value})}> </textarea>
                <textarea type="text" placeholder="dog breed activity level" onChange={(e) => this.setState({activityLevel: e.target.value})}> </textarea>
                <textarea type="text" placeholder="dog breed description" onChange={(e) => this.setState({description: e.target.value})}></textarea>
            </div>

            <div>
                <button onClick={() => this.newDog()}></button>
            </div>
        </div>
    )

}

我在 newDog 函数中有一个 axios 发布请求。

这是我在节点中的端点，具有大量连接字符串。

massive(config.dblink).then(db => {
    app.set('db', db)
})
app.post('/api/createdog', dc.createDog);

控制器：

module.exports = {
createDog: (req, res) => {
    const {name, activityLevel, description} = req.body;

    req.app.get('db').create_dog([name, activityLevel, description])
        .then(dog => {
            console.log(dog)
            res.status(200).send(dog);
        }).catch(err => {
              res.status(500).send(err)})
    }
}

SQL查询

INSERT INTO dogBreed (name, activity_level, description)
VALUES
('English Bulldog', 'super lazy', 'English bulldogs are super lazy but 
adorable')
returning *;

我已经看了好几天了，它似乎与我试图遵循的所有示例相匹配。请帮忙。抱歉代码超载。

这是我得到的错误：

POST http://localhost:3002/api/createdog 404 (Not Found)

Answer 1

我相信错误是因为您在此调用中使用了完整的 URL：

axios.post('http://localhost:3002/api/createdog', doggy)

而是尝试使用相对路径：

axios.post('/api/createdog', doggy)

如果这不起作用，请不要忘记在之前添加项目名称/api：

axios.post('/projectName/api/createdog', doggy)

这为我解决了。

Answer 2

我有类似的问题，调试后，e.preventDefault()在提交表单时添加：

handleSubmit = (e) => {

         e.preventDefault()
...

}

Answer 3

我错误地使用了axios，

axios.get({ url:'' , method:''}).then

同时，如果将参数作为对象传递，则使用 .get() 是不正确的语法。所以它变成了

axios({url:'your url' , method:'post'}