使用 Vue.js 和 Axios 使用 REST API (C#) 返回的字符串

Question

我在 Azure 上创建并部署了一个 API。我的测试方法返回一个值为“working”的字符串。 API 可以在这里测试：https://audaciaballapi20200911031401.azurewebsites.net/Test

我想使用 javascript (Vue.js) 在警报框中显示“工作”。如何做到这一点？

这是我的 API 的方法：

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

这是我在我的 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>

问题：没有弹出提示框

预期行为：弹出警告框，文本为“working”

编辑：想通了 按照下面评论的建议，我已经按照本教程进行操作：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

我还在 BE 中修改了我的代码，如下所示：

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

现在，我可以在我的 FE 中显示响应数据。谢谢！

Answer 1

查看电话，问题不在 FE 方面，而是在 BE 方面，因为问题在 CORS 方面，

阅读 CORS 的链接，了解它是什么以及它是如何工作的 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

在 .net core 上启用 cors => How to enable CORS in ASP.net Core WebAPI

在 .net 框架上启用 cors => How to enable cross origin requests in ASP.NET MVC