After successfully creating and deploying an API on Azure, I am trying to display the response in an alert box using javascript (Vue.js). The test method of my API returns the string "working". You can test the API here.
This is the code snippet from my API:
[System.Web.Http.Route("")]
[System.Web.Http.HttpGet]
public string Test()
{
return "working";
}
In my Vue component, I have the following code:
<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>
Issue: No alert box is popping up as expected.
Desired Outcome: An alert box should appear with the text "working".
UPDATE: PROBLEM SOLVED With guidance from a comment, I followed this tutorial: Enabling Cross-Origin Requests in Web API. Additionally, I made changes to the backend code as shown below:
[System.Web.Http.Route("test")]
[System.Web.Http.HttpGet]
public HttpResponseMessage Test()
{
return new HttpResponseMessage()
{
Content = new StringContent("working")
};
}
Now, I am able to display the response data in my front end. Thank you for the help!