我不明白为什么我的 axios post 请求不起作用 - 找不到 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 post 请求。

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

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.get({ url:'' , method:''}).then

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

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