將簡單的 HTML 前端連接到使用 C# 構建的 API

Question

我用 C# 構建了一個 API，當我從 Postman 執行“獲取”時，它可以正常工作。

現在，我正在嘗試使用我正在構建的 HTML 網頁執行相同的“獲取”。

到目前為止，這是我的 HTML：

<!DOCTYPE html>
<html>
    <body>

        <h1>My First Heading</h1>

        <p>My first paragraph.</p>

            <script>
                const Http = new XMLHttpRequest();
                const url='https://localhost:44369';
                Http.open("GET", url);
                Http.send();

                Http.onreadystatechange = (e) => {
                console.log(Http.responseText)
                }

            </script>

    </body>
</html>

這是我的API中我試圖執行“獲取”的方法：

//https://localhost:44369/api/Request
[EnableCors("AllowLocalhostOrigins")]
[HttpGet]
public ActionResult GetText()
{
    
    string a = "b";

    return Ok(a);
}

這是錯誤：

從源“null”訪問“https://localhost:44369/”處的 XMLHttpRequest 已被 CORS 策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”標頭。

我已經閱讀了有關 CORS 的信息，但我不清楚我需要在 HTML 中做什么才能使其工作。 API 在 Postman 中很好地返回了“獲取”請求，所以我知道 API 至少可以正常運行。

Answer 1

您需要在 API 中設置 CORS 策略。 請看這個問題-> 如何在 ASP.NET Core 中啟用 CORS接受的答案有指向 MSDN 文檔的鏈接。

你也可以在這里找到一個很棒的教程 -> C# Corner Cors Tutorial

您的前端正在從特定 URL 調用。 您的 API 根據其有關調用它的 URL (CORS) 的策略確定是否要授予該請求。

為了進一步澄清，鑒於您的前端應用程序中沒有錯誤，因此沒有任何內容阻止您調用 API。 API 告訴它“不”，因為 API 未配置為接受來自前端 URL 的請求。

編輯

根據Mason在下面的評論中提供的非常有用的信息，我對如何使用 CORS 設置權限是不正確的。 雖然您確實在 API 中配置了 CORS，但它是 API 提供給瀏覽器的基於標頭的系統。 然后，您的瀏覽器知道它是受信任的來源，它將允許來自托管 API 的服務器的信息加載到瀏覽器中。 瀏覽器允許 API，而不是 API 允許從瀏覽器調用。

Answer 2

將我的 Startup.cs 文件更改為以下文件后，我不再收到“訪問被 CORS 策略錯誤阻止”。

        public void ConfigureServices(IServiceCollection services)
    {
        /* I added */
        services.AddCors(options =>
        {
            options.AddDefaultPolicy(
                builder =>
                {
                    builder.AllowAnyOrigin()
                                 .AllowAnyMethod()
                                 .AllowAnyHeader();
                                 //.AllowCredentials();
                });
        });

        services.AddControllers();           
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
     
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }          

        app.UseHttpsRedirection();

        app.UseRouting();

        /* I added */
        app.UseCors();

將簡單的 HTML 前端連接到使用 C# 構建的 API

問題描述

2 個解決方案

解決方案1
1 已采納 2022-06-05 06:05:51

解決方案2
0 2022-06-05 07:09:40

將簡單的 HTML 前端連接到使用 C# 構建的 API

問題描述

2 個解決方案

解決方案1 1 已采納 2022-06-05 06:05:51

解決方案2 0 2022-06-05 07:09:40

解決方案1
1 已采納 2022-06-05 06:05:51

解決方案2
0 2022-06-05 07:09:40