I'm currently working on a VueJS web application that interacts with a C# WebAPI in the background. I have successfully created an endpoint, but I am facing an issue where the body of the response is always null. While debugging in the network tab, I can see the desired message in the preview section, but I'm unable to display it on the page.
VueJS component:
<template>
<div class="dashboard">
<button type="button" id="get-joke" @click="fetchAPIData">Get a Joke!!</button>
<div v-if="responseAvailable == true">
<hr>
<p>
<i>{{result}}</i>
</p>
<hr>
</div>
</div>
</template>
<script>
export default {
name: 'Dashboard',
props: {
msg: String
},
components: {
},
Data() {
result: null,
responseAvailable: null
},
methods: {
fetchAPIData() {
this.responseAvailable = false;
fetch("https://localhost:44322/api/values", {
"mode": "no-cors",
"method": "GET",
})
.then(response => {
alert(response); //checking if i get something
return response.json();
})
.then(response => {
this.result = response.body;
this.responseAvailable = true;
})
.catch(err => {
var error = err;
return error;
});
}
}
};
</script>
C# API Controller (returning a JSON string of a list of Objects) :
using System;
using Microsoft.AspNetCore.Mvc;
using MO_Backend.Services;
using MO_Backend.APIServices;
namespace MO_Backend.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
private readonly O_UserService _oUserService;
public ValuesController(O_UserService oUserService)
{
_oUserService = oUserService;
}
// GET: api/values
[HttpGet]
public String Get()
{
OnlineCheckService occ = new OnlineCheckService(_oUserService);
return occ.GetRobotState();
}
}
}
If you have any insights on what might be causing this issue or suggestions for an alternative approach, please let me know!