Consume string returned by REST API (C#) with Vue.js and Axios

Question

I've created and deployed an API on Azure. My test method returns a string with the value "working". The API can be tested here : https://audaciaballapi20200911031401.azurewebsites.net/Test

I would like to show "working" inside an alert box using javascript (Vue.js). How can this be done?

This is the method of my API :

[System.Web.Http.Route("")]
[System.Web.Http.HttpGet]
public string Test()
{
    return "working";
}

This is the code I'm using in my vue :

<template>
    <div class="home">
        <router-link to="/gameType" tag="button">New Game</router-link>
        <br /><br/>
        <router-link to="/gameHistory" tag="button">Game History</router-link>
        <br /><br />
        <router-link to="/addPlayer" tag="button">Create Player</router-link>
        <router-link to="/addTeam" tag="button">Create Team</router-link>
        <div id="app"></div>
    </div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios';

async function getTest() {
    const response = await axios ({
        url: "https://audaciaballapi20200911101217.azurewebsites.net/Test",
        method: "get"
    })

    alert(response.data);
}

getTest()

</script>

Problem : no alert box pops up

Expected behavior : alert box pops up with "working" as text

EDIT : FIGURED IT OUT Following the advice from the comment below, I've followed this tutorial : https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

I've also modified my code in the BE as follows :

[System.Web.Http.Route("test")]
        [System.Web.Http.HttpGet]
        public HttpResponseMessage Test()
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent("working")
            };
        }

Now, I can show the response data in my FE. Thank you!

Answer 1

looking at the call, the problem is not on the FE side but on the BE as the problem is on the CORS side,

link to read up on CORS, what it is and how it works https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

enable cors on .net core => How to enable CORS in ASP.net Core WebAPI

enable cors on .net framework => How to enable cross origin requests in ASP.NET MVC