解决  从axios.post()获取404

龙4ik

会员
已加入
2020年10月24日
留言内容
16
编程经验
Beginner
大家好!
我是ASP.NET的新手,请尝试使用此技术编写我的第一个应用程序,该应用程序的客户端大小由React.js编写。这是简单的SPA,应该从其形式发送数据并得到答复。但是每个请求最终都会显示以下消息("未捕获(承诺)错误:请求失败,状态码为404"),我无法解决此问题。

这是我的FormComponent代码:
C#:
import './Form.css'
import React, { Component } from 'react'
import axios from 'axios'

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

        this.state={
            name: "",
            email: "",
            text: ""
        }

        this.onNameChange = this.onNameChange.bind(this);
        this.onEmailChange = this.onEmailChange.bind(this);
        this.onTextChange = this.onTextChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onNameChange(e) {
        this.setState({ name: e.target.value });
    }

    onEmailChange(e) {
        this.setState({ email: e.target.value });
    }

    onTextChange(e) {
        this.setState({ text: e.target.value });
    }

    onSubmit(e) {
        e.preventDefault();
        var commentName = this.state.name;
        var commentEmail = this.state.email;
        var commentText = this.state.text;
        if (!commentName || !commentEmail || !commentText) {
            return;
        }

        var data = new FormData(e.target);

        axios({
            方法: 'post',
            url: '/',
            data: data,
        })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => { throw err });

        this.setState({ name: "", email: "", text: "" });
      
    }

    render() {
        return (
            <section>
                <form id="my-form" onSubmit={this.onSubmit}>
                    <a id="feedback-btn" type="submit">Нам важлива ваша думка</a>
                    <label htmlFor="in_name">Ім'я:</label>
                    <input id="in_name" type="text" onChange={this.onNameChange}/>
                    <label htmlFor="in_email">Email:</label>
                    <input id="in_email" type="email" onChange={this.onEmailChange}></input>
                    <label htmlFor="text_feedback">Коментар:</label>
                    <textarea name="feedback" id="text_feedback" onChange={this.onTextChange}></textarea>
                    <button type="submit">Залиште відгук</button>
                </form>
            </section>
        )
    }
}
控制器API:
C#:
using Gazda.Models;
using Microsoft.AspNetCore.Mvc;
using System;

// For more information on enabling Web API for empty projects, visit [URL='//go.microsoft.com/fwlink/?LinkID=397860']Part 3, add a view to an   ASP.NET   Core MVC app[/URL]

namespace Gazda.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class CommentController : ControllerBase
    {

        // POST api/<CommentController>
        [HttpPost]
        public IActionResult Post(Comment comment)
        {

            comment.Id = Guid.NewGuid().ToString();

            return Ok(comment);
        }

    }
}
和评论模型:
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Gazda.Models
{
    public class Comment
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string  电子邮件  { get; set; }
        public string Text { get; set; }
    }
}
我不明白我在做什么错。在我看来,这是一个非常简单的错误,但是我花了几个小时却找不到任何解决方案。提前谢谢您!!!
附言对不起我的英语不好
 

约翰·H

C#论坛主持人
工作人员
已加入
2011年4月23日
留言内容
1,028
地点
挪威
编程经验
10+
我通过使用以下代码框来修复帖子的可读性:

insertcode.png
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,500
地点
弗吉尼亚州切萨皮克
编程经验
10+
Set a breakpoint on your Controller's Post 方法. Is it even being reached?

Can PostMan or Swagger reach your Post 方法?
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,500
地点
弗吉尼亚州切萨皮克
编程经验
10+
axios({ 方法: 'post', url: '/', data: data, })
该网址对我来说可疑。大多数ASP.NET WebAPI方法URL看起来像"/api/<controller>/<method>/"。因此,您的网址至少应为"/api/Comment"
 

龙4ik

会员
已加入
2020年10月24日
留言内容
16
编程经验
Beginner
该网址对我来说可疑。大多数ASP.NET WebAPI方法URL看起来像"/api/<controller>/<method>/"。因此,您的网址至少应为"/api/Comment"
非常感谢。我更改了URL,还通过dataForm.append()传递了信息。由于这个原因,我开始收到控制器的响应。但是,出现了下一个问题:控制器返回Comment对象,该字段为空(Id除外)。这个问题可能是什么原因?

修改后的Form.js:
JavaScript:
import './Form.css'
import React, { Component } from 'react'
import axios from 'axios'

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

        this.state={
            name: "",
            email: "",
            text: ""
        }

        this.onNameChange = this.onNameChange.bind(this);
        this.onEmailChange = this.onEmailChange.bind(this);
        this.onTextChange = this.onTextChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onNameChange(e) {
        this.setState({ name: e.target.value });
    }

    onEmailChange(e) {
        this.setState({ email: e.target.value });
    }

    onTextChange(e) {
        this.setState({ text: e.target.value });
    }

    onSubmit(e) {
        e.preventDefault();
        var commentName = this.state.name;
        var commentEmail = this.state.email;
        var commentText = this.state.text;
        if (!commentName || !commentEmail || !commentText) {
            return;
        }

        console.log(commentName);
        console.log(commentEmail);
        console.log(commentText);

        var data = new FormData();

        data.append("name", commentName);
        data.append("email", commentEmail);
        data.append("text", commentText);
        axios({
            方法: 'post',
            url: '/api/Comment',
            data: data,
        })
            .then((res) => {
                console.log(res.data);
            })
            .catch((err) => { throw err });

        this.setState({ name: "", email: "", text: "" });
        
    }

    render() {
        return (
            <section>
                <form id="my-form" onSubmit={this.onSubmit}>
                    <a id="feedback-btn" type="submit">Нам важлива ваша думка</a>
                    <label htmlFor="in_name">Ім'я:</label>
                    <input id="in_name" type="text" onChange={this.onNameChange}/>
                    <label htmlFor="in_email">Email:</label>
                    <input id="in_email" type="email" onChange={this.onEmailChange}></input>
                    <label htmlFor="text_feedback">Коментар:</label>
                    <textarea name="feedback" id="text_feedback" onChange={this.onTextChange}></textarea>
                    <button type="submit">Залиште відгук</button>
                </form>
            </section>
        )
    }
}

修改后的CommentController:
C#:
[HttpPost]
        public IActionResult Post([FromQuery]Comment comment)
        {

            comment.Id = Guid.NewGuid().ToString();

            return Ok(comment);
        }
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,500
地点
弗吉尼亚州切萨皮克
编程经验
10+
Considering that you only set the Id in your 控制者 方法, why are you surprised?

同样,C#区分大小写。看起来您的JavaScript正在发送带有小写字段名称的表单数据,而您的Comment类具有Pascal大小写字段名称。
 
最佳 底部