C#•9mo ago

Vue Fetch POST results in 404 but Swagger shows no errors

Currently trying to get to grips with ASP.NET and figured since I know Vue it'd be a great way to get me to learn it since I know how the front end works. I've got a problem with my POST request to the .NET server that I'm unsure of why the call isn't being found. I've followed instructions on how to make the controller for the back end, how to make sure it's available and also using the Swagger page to debug if it's a server side issue. The screenshots I've attached show that it's not an issue with the back end. I just can't understand why it's not communicating with the front end. Any suggestions would be greatly appreciated.

postToTest() { // 404?
    console.log(this.text);
    fetch('notes', {
        method: "POST",
        body: JSON.stringify({"name": "Test text"}),
        headers: {
            "Content-type": "application/json"
        }
    });
},
getToTest() { // Works as expected
    this.awaitGet();
    fetch('notes/1').then(r => {
        console.log(r);
    });
},

postToTest() { // 404?
    console.log(this.text);
    fetch('notes', {
        method: "POST",
        body: JSON.stringify({"name": "Test text"}),
        headers: {
            "Content-type": "application/json"
        }
    });
},
getToTest() { // Works as expected
    this.awaitGet();
    fetch('notes/1').then(r => {
        console.log(r);
    });
},

21 Replies

Pobiega•9mo ago

can you show your .NET controller/endpoint code?

AdamWolfyOP•9mo ago

I used the scaffolding provided by VS2022 and am planning on using I/O as a temporary means of storage and then to DB connections, the post writes to the file correctly from Swagger but results in a 404 from the front end

using Microsoft.AspNetCore.Mvc;
using System.IO;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace DnDNotesAppVue.Server.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class NotesController : ControllerBase
    {
        const string filename = "test.txt";
        // GET: api/<NotesController>
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/<NotesController>/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }

        // POST api/<NotesController>
        [HttpPost]
        public void Post([FromBody] string value)
        {
            if (!System.IO.File.Exists(filename))
            {
                System.IO.File.Create(filename);
            }
            StreamWriter writer = new StreamWriter(filename);
            

            writer.WriteLine(value);
            writer.Close();
        }

        // PUT api/<NotesController>/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/<NotesController>/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

using Microsoft.AspNetCore.Mvc;
using System.IO;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace DnDNotesAppVue.Server.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class NotesController : ControllerBase
    {
        const string filename = "test.txt";
        // GET: api/<NotesController>
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/<NotesController>/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }

        // POST api/<NotesController>
        [HttpPost]
        public void Post([FromBody] string value)
        {
            if (!System.IO.File.Exists(filename))
            {
                System.IO.File.Create(filename);
            }
            StreamWriter writer = new StreamWriter(filename);
            

            writer.WriteLine(value);
            writer.Close();
        }

        // PUT api/<NotesController>/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/<NotesController>/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

Pobiega•9mo ago

So, your POST endpoint expects a string as your body you are sending an object .NET understands json just fine, you shouldnt be shipping it around as strings if you want an object with a name property, make a public record SomeObjectNameHere(string Name); record and use that as your body type

AdamWolfyOP•9mo ago

Was this what you were referring to? I've made this model and tried to make the POST take it as a value but I'm still getting the same error.

namespace DnDNotesAppVue.Server.Models
{
    public record class Note
    {
        public int Id { get; set; }
        public string? Name { get; set; }

        public Note(string name)
        {
            this.Name = name;
        }
    }
}

namespace DnDNotesAppVue.Server.Models
{
    public record class Note
    {
        public int Id { get; set; }
        public string? Name { get; set; }

        public Note(string name)
        {
            this.Name = name;
        }
    }
}

NotesController change:

[HttpPost]
public void Post([FromBody] Note value)
{
    if (!System.IO.File.Exists(filename))
    {
        System.IO.File.Create(filename);
    }
    StreamWriter writer = new StreamWriter(filename);
    

    writer.WriteLine(value.Name);
    writer.Close();
}

[HttpPost]
public void Post([FromBody] Note value)
{
    if (!System.IO.File.Exists(filename))
    {
        System.IO.File.Create(filename);
    }
    StreamWriter writer = new StreamWriter(filename);
    

    writer.WriteLine(value.Name);
    writer.Close();
}

Pobiega•9mo ago

Thats better - but can you have the network view open in the browser debugger, set to Fetch/XHR when the request from vue is sent? we need to see exactly how the HTTP request looks like If you can get it working, I'll need screenshots of the Headers and Payload tabs

AdamWolfyOP•9mo ago

Here's what you requested

Pobiega•9mo ago

ah, look at that payload 😄 its not actually an object - its literally the text [object Object] also you dont need to keep masking the port number the port is only open on your localhost interface, meaning only your computer can locally reach it

AdamWolfyOP•9mo ago

ah fair, I'm not too well versed on cyber security and there's been an uptick in the amount of people getting hacked, especially on discord atm so I'm just being overly-cautious I've just got this error message from my IDE but I'm not too sure on what this is referring to, I found a stack overflow post mentioning that I need to use JSON.stringify but that doesn't seem to have solved the porblem

AdamWolfyOP•9mo ago

also really sorry about this, I'm usually plagued by errors

Pobiega•9mo ago

hm, yeah it looks about right as far as I can tell you are not awaiting the fetch, but that shouldn't cause a 404 I'd imagine actually, can you hit the endpoint via swagger or postman/insomnia? just to be sure that the endpoint is there and alive and kicking

AdamWolfyOP•9mo ago

Yeah the endpoints can be hit via swagger, I've included that in the first lot of screenshots

Pobiega•9mo ago

Not since after you changed the payload to be an object, but fine if you open the browser debug window before you issue the request from swagger, you should be able to see the request there and compare

AdamWolfyOP•9mo ago

Here's the results from using Swagger, so this is actually sending a JSON body, I'm just not sure as to why the JSON.stringify doesn't do the same thing if trying to just pass the object

postToTest() {
    var body = { "id": 0, "name": "Test text" };
    console.log(body);

    fetch('notes', {
        method: "POST",
        mode: "cors",
        body: JSON.stringify(body),
        headers: {
            "Content-type": "application/json"
        }
    });
},

postToTest() {
    var body = { "id": 0, "name": "Test text" };
    console.log(body);

    fetch('notes', {
        method: "POST",
        mode: "cors",
        body: JSON.stringify(body),
        headers: {
            "Content-type": "application/json"
        }
    });
},

AdamWolfyOP•9mo ago

I've at least got it to submit the correct payload now but for some reason the call still results in a 404

            postToTest() {
                var b = { "id": 0, "name": "Test text" };
                console.log(b);
                console.log(JSON.stringify(b));

                fetch('notes', {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(b),
                });
            },

            postToTest() {
                var b = { "id": 0, "name": "Test text" };
                console.log(b);
                console.log(JSON.stringify(b));

                fetch('notes', {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(b),
                });
            },

AdamWolfyOP•9mo ago

I see that the port number is different, but the example project calls that I've left in in case something breaks still work with this mismatched port number

AdamWolfyOP•9mo ago

I'm so confused and I'm really sorry, I just want to get this sorted so I can get on with this project

Pobiega•9mo ago

The port numbers are important. I see you did a get weather forecast request to the same port as the 404 for notes, but the working Swagger one had a different one

AdamWolfyOP•9mo ago

Yeah I don't know why my swagger opens up on a completely different port to my app but I'm even more confused as to why the weather forecast was a 200 OK but my POST was a 404 Considering they both use the same port

Pobiega•9mo ago

Time to share the project I think Can you put this on github or similar?

AdamWolfyOP•9mo ago

Is it okay if I send you it via DMs? it's on a repo I'd rather not be publicly available

Pobiega•9mo ago

Suer sure Fixed in private For the record, the problem was that the default proxy was not prefixed, so all requests "to the api" actually went to the frontend returning a 200 for all gets. Fixed by adding an /api/ prefix to backend routes and change the vite proxy to only proxy api requests

Gaming

Programming

Vue Fetch POST results in 404 but Swagger shows no errors