无法从 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/