如何在同一解决方案中的 asp.net core Razor 页面中使用单独的 asp.net core web api答案

【问题标题】：How to Use separate asp.net core web api in asp.net core Razor Page in Same Solution如何在同一解决方案中的 asp.net core Razor 页面中使用单独的 asp.net core web api
【发布时间】：2019-05-07 14:42:20
【问题描述】：

我使用 Asp.net Core Razor Page 作为我的 webApp 和 asp.net Core api 项目作为我的 api 服务分离...现在我可以如何在 WebApp 中使用 api...谢谢

【问题讨论】：

将新项目添加到解决方案中，您可以在解决方案中拥有两个或多个 Web 层。
如果您只想使用 Web API，则不必将其包含在解决方案中。您只需在需要时调用 HTTP 请求。如果需要一种解决方案，请参考 TLDR； binaryintellect.net/articles/…
您可以在同一个项目中拥有 WebApi 控制器和 Razor 页面。如果需要，您可以将它们放在单独的项目中，但它们也可以并排工作。

标签： c# asp.net-core asp.net-core-webapi razor-pages

【解决方案1】：

如果两个项目的原件不同，需要enable Cross-Origin Requests (CORS) in ASP.NET Core。

然后你可以使用 ajax 或 fetch api 来调用 Razor Pages 中的 web api。

例如，假设 Razor Pages 具有原始 https://localhost:44304 和 Web Api https://localhost:44362

1.在Web Api项目startup.cs中

配置服务：

services.AddCors(options =>
        {
            options.AddPolicy("MyPolicy",
            builder =>
            {
                builder.WithOrigins("https://localhost:44304")
                .AllowAnyHeader()
                .AllowAnyMethod();
            });
        });

配置：

app.UseCors("MyPolicy");
app.UseHttpsRedirection();

2.Razor Pages Index.cshtml：

<div>
<input type="button" value="Test"
        onclick="requestVal('https://localhost:44362/api/values')" />
<span id='result'></span>
</div>

<script>
function requestVal(uri) {
    const resultSpan = document.getElementById('result');

    fetch(uri)
        .then(response => response.json())
        .then(data => resultSpan.innerText = data)
        .catch(error => resultSpan.innerText = 'See F12 Console for error');
}
</script>

3.点击按钮并显示结果

【讨论】：

这是我找到的最有帮助的答案。想要补充一点，您必须在调用 services.AddControllers() 后调用 services.AddCors(...) 并在调用 app.UseRouting() 后调用 app.UserCors("myPolicy");