如何在相同解決方案的asp.net核心Razor頁面中使用單獨的asp.net核心web api

Question

我使用Asp.net Core Razor Page作為我的webApp和asp.net Core api項目作為我的api服務單獨...現在我如何在WebApp中使用apis ...謝謝

Answer 1

如果這兩個項目具有不同的原始文件，則需要在ASP.NET Core中啟用跨源請求（CORS） 。

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

例如，假設Razor Pages有一個原始的https://localhost:44304和Web Api https://localhost:44362

1.在Web Api項目startup.cs

ConfigureService：

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.單擊按鈕並顯示結果