reactjs 如何设置ASP,NET Core 6 Web API CORS for React应用?

w1jd8yoj  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(140)

我正在创建一个ASP。NET Core 6 Web API,可以使用fetch API调用从React应用程序调用。我一直在关注微软的文档(Enable Cross-Origin Requests (CORS) in ASP.NET Core),只有部分成功。
我可以成功调用GET。只有当值被传递给查询字符串时,我才能成功地调用POST。如果我尝试POST一个body,我会得到一个错误。
React中从http://localhost:3000/获取的示例:

await fetch('http://localhost:14157/Test', {
    method: 'GET',
    credentials: 'include',
});

React中的POST示例到http://localhost:3000/

await fetch('http://localhost:14157/Test', {
    method: 'POST',
    credentials: 'include',
    headers: {
    'Content-Type': 'application/json'
    },
    body: JSON.stringify({
    "firstName": "John",
    "lastName": "Doe"
    }),
});

ASP.NET Core 6 Web API Program.cs

public class Program
{
    public static void Main(string[] args)
    {
        var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

        var builder = WebApplication.CreateBuilder(args);

        // Add services to the container.
        builder.Services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                                policy =>
                                {
                                    policy.WithOrigins("http://localhost:3000")
                                    .AllowAnyMethod()
                                    .AllowAnyHeader()
                                    .AllowCredentials();
                                });
        });

        builder.Services.AddControllers();
        // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
        builder.Services.AddEndpointsApiExplorer();
        builder.Services.AddSwaggerGen();

        var app = builder.Build();

        // Configure the HTTP request pipeline.
        if (app.Environment.IsDevelopment())
        {
            app.UseSwagger();
            app.UseSwaggerUI();
        }

        app.UseCors(MyAllowSpecificOrigins);

        app.UseAuthorization();

        app.MapControllers();

        app.Run();
    }
}

测试控制器

[ApiController]
[Route("[controller]")]
public class TestController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok();
    }

    [HttpPost]
    public IActionResult Post(User user)
    {
        return Ok(user);
    }
}

我在我的控制器中的Post方法中从未命中断点,并在Chrome Dev Tools中得到此错误:
CORS策略阻止了从源“http://localhost:3000”获取“http://localhost:14157/Test”的访问:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。如果一个不透明的响应满足了你的需求,将请求的模式设置为“no-cors”,以在禁用CORS的情况下获取资源。
我的React应用程序运行在http://localhost:3000/和ASP.NET Core Web API在http://localhost:14157/上运行。
是否有我遗漏的任何配置?

**更新:**我把我的例子推到了公共的BitBucket仓库,如果你有时间的话可以看看。.NET Web APIReact。谢谢大家!

euoag5mw

euoag5mw1#

我不知道怎么回事。但我用的是完全相同的代码,而且成功了。我想知道你是否有其他代码没有列出。
您的CORS配置没有问题。
------------编辑----------Hi@user12858805,
我从Bitbucket下载了你的代码,它仍然工作正常。下面是截图。

我唯一改变的是corsapi/Properties/launchSettings.json,当开始使用kestrel时,url不是http://localhost:14157。我使用dotnet run启动API。

你在使用IIS吗?

相关问题