我正在创建一个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 API和React。谢谢大家!
1条答案
按热度按时间euoag5mw1#
我不知道怎么回事。但我用的是完全相同的代码,而且成功了。我想知道你是否有其他代码没有列出。
您的CORS配置没有问题。
------------编辑----------Hi@user12858805,
我从Bitbucket下载了你的代码,它仍然工作正常。下面是截图。
我唯一改变的是
corsapi/Properties/launchSettings.json
,当开始使用kestrel时,url不是http://localhost:14157。我使用dotnet run
启动API。你在使用IIS吗?