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.
![No description](https://cdn.answeroverflow.com/1214151600709304360/image.png)
![No description](https://cdn.answeroverflow.com/1214151601061896252/image.png)
![No description](https://cdn.answeroverflow.com/1214151601363623956/image.png)
21 Replies
can you show your .NET controller/endpoint code?
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
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 typeWas 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.
NotesController change:
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 tabsHere's what you requested
![No description](https://cdn.answeroverflow.com/1214620625881014354/image.png)
![No description](https://cdn.answeroverflow.com/1214620626149441596/image.png)
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 itah 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![No description](https://cdn.answeroverflow.com/1214670151287578694/image.png)
also really sorry about this, I'm usually plagued by errors
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
Yeah the endpoints can be hit via swagger, I've included that in the first lot of screenshots
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
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
![No description](https://cdn.answeroverflow.com/1214865139715805235/image.png)
![No description](https://cdn.answeroverflow.com/1214865140193824768/image.png)
I've at least got it to submit the correct payload now but for some reason the call still results in a 404
![No description](https://cdn.answeroverflow.com/1215037634049744947/image.png)
![No description](https://cdn.answeroverflow.com/1215037634359861298/image.png)
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
![No description](https://cdn.answeroverflow.com/1215038526706688042/image.png)