無法從 React.js (CORS) 訪問 ASP.NET Core API

Question

我正在開發一個使用 React 作為前端和 ASP.NET Core 作為后端的 Web 應用程序。

這是來自我的Startup.cs的代碼。

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
            {
                builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod();
            });
    });
}

這是我的完整 API 控制器，在 Visual Studio 2022 中使用 ISS 進行調試時，它在 Chrome 中運行良好。

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace AsignacionesBackend.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ApiController : ControllerBase
    {
        private readonly ILogger<ApiController> _logger;

        public ApiController(ILogger<ApiController> logger)
        {
            _logger = logger;
        }

        [Route("Login")]
        public IActionResult Login()
        {
            JsonUser body = new JsonUser("hola", "buenas");
            body.Token = "tokendeprueba";
            JsonResult json = new JsonResult(body);
            return json;
        }

        public class JsonUser
        {
            public string User { get; set; }
            public string Pass { get; set; }
            public string Token { get; set; }

            public JsonUser(string user, string pass)
            {
                User = user;
                Pass = pass;
            }
        }
    }
}

這是調用 API 的 React 代碼。

let result = fetch("https://localhost:5001/Api/Login");
result = await (await result).json;
console.log(result);

執行 React 代碼時，我在 Chrome 控制台中收到此錯誤：

CORS 策略阻止了從源“https://localhost:5001/Api/Login”獲取的訪問權限：沒有“Access-Control-Allow-Origin”標頭請求的資源。 如果不透明的響應滿足您的需求，請將請求的模式設置為“no-cors”以獲取禁用 CORS 的資源。

我是 ASP.NET 和 React 的新手，因此歡迎任何形式的幫助或提示。 如果您需要更多信息，我將編輯問題。

Answer 1

CORS 是 ASP.NET 的添加分兩步：

1. 添加在Startup中的ConfigureServices中完成的所需服務
2. 添加在Startup中的Configure中完成的 CORS 中間件

根據您所展示的內容，我假設您錯過了step 2 。 在Startup的Configure方法中，您應該在 UseRouting()之后添加對UseCors() UseRouting()調用。

這是關於CORS的官方頁面。 注意：示例使用 .NET 6 最小 api，但想法保持不變 - 添加服務然后添加中間件。

Answer 2

您的問題是，您在 localhost:3000 上的開發服務器正在發送一個 cors 標頭。

看看這里： https ://create-react-app.dev/docs/proxying-api-requests-in-development/