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

Posted 2023-03-04

【中文标题】使用 Vue.js 和 Axios 使用 REST API (C#) 返回的字符串

【英文标题】：Consume string returned by REST API (C#) with Vue.js and Axios

【发布时间】：2020-12-29 23:18:54

【问题描述】：

我在 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 中显示响应数据。谢谢！

【参考方案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

【讨论】：

谢谢！我相信问题确实出在后端。我遵循本教程：docs.microsoft.com/en-us/aspnet/web-api/overview/security/… 并修改了我的代码，我将在上面发布我的答案。干杯

很高兴为您提供帮助：D 如果可行，请将此答案标记为正确