我有一个Blazor WASM应用程序和一个Web Api,供Blzor通过HttpClient调用。这两个程序运行在同一台机器上(也在生产环境中运行,对于小型企业应用程序来说,这不应该是一种奇特的环境!)。
从Blazor客户端调用Web Api会导致客户端CORS异常
CORS策略阻止了对从源'https://localhost:5001‘获取'http://localhost:4040/’的访问:请求的资源上不存在' Access -Control-Allow- origin‘标头。如果不透明的响应满足您的需求,请将请求的模式设置为'no- CORS‘,以便在禁用CORS的情况下获取资源。
这是本例的预期行为。
在我用PHP开发的一个以前的api项目中,它具有相同的客户端行为,我可以通过简单地设置响应头来绕过CORS异常。
$response = new Response;
$response->setState(false, $route->command);
...
header("Access-Control-Allow-Origin: *");
echo $response;现在我想在我的.net 5.0WebApi中使用它。我在互联网上找到了不同的文档来解决这个问题,比如
https://docs.microsoft.com/de-de/aspnet/core/security/cors?view=aspnetcore-5.0 https://www.c-sharpcorner.com/article/enabling-cors-in-asp-net-core-api-application/ https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.cors.infrastructure.corspolicybuilder.withorigins?view=aspnetcore-5.0
并在我的api中实现它。
public class Startup {
//---------------------------------------------------------------------
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
//---------------------------------------------------------------------
public IConfiguration Configuration { get; }
//---------------------------------------------------------------------
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices
(
IServiceCollection services
)
=> services
.AddCors()
.AddSwaggerGen(c => c.SwaggerDoc("v1", new OpenApiInfo { Title = "api", Version = "v1"}) )
.AddControllers()
;
//---------------------------------------------------------------------
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure
(
IApplicationBuilder app,
IWebHostEnvironment env
)
=> app.
apply( _ =>
{
if (true) //(env.IsDevelopment())
{
app
.UseDeveloperExceptionPage()
.UseSwagger()
.UseSwaggerUI( c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "api v1") );
}
})
.UseCors( cors =>
cors
.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed( _ => true )
.AllowCredentials()
)
.UseHttpsRedirection()
.UseRouting()
.UseAuthorization()
.UseEndpoints( e => e.MapControllers() )
;
//---------------------------------------------------------------------
}甚至尝试在ApiController中设置响应头
[Route("/")]
[ApiController]
public sealed class ServertimeController : ControllerBase
{
//[EnableCors("AllowOrigin")]
[HttpGet]
public Servertime Get() {
Response.Headers.Add("Access-Control-Allow-Origin", "*");
Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT");
return servertime();
}
}Blazor WASM客户端如下所示
private async void onClick()
{
var response = await httpClient.GetFromJsonAsync<Servertime> ("http://localhost:4040");
message = response.servertime;
this.StateHasChanged();
}但它仍然会导致客户端CORS异常。为了在开发中绕过这一点,我使用了浏览器扩展“CORS Unblock”,但这不是用于部署的选项。
什么是避免Blazor客户端异常的正确方法,我错过了什么?
发布于 2021-01-28 21:15:11
@Dmitriy Grebennikov的回答也是有效的,但它需要一点改进才能使其更安全。
在Startup.cs的ConfigureServices中,在services.AddControllers();之前添加以下代码
services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
builder.WithOrigins("https://localhost:44338")
.AllowAnyMethod()
.AllowAnyHeader());
}); 确保您的url不应以/结尾。
您可以将许多url传递给WithOrigins方法。最后,在Startup.cs的Configure方法中,在app.UseAuthorization();之前和app.UseRouting();之后添加以下行
app.UseCors();代码现在应该可以工作了。
发布于 2020-11-16 21:02:20
只需将此代码添加到ConfigureServices方法:
services.AddCors(options =>
{
options.AddPolicy("DevCorsPolicy", builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});和下面的配置方法:
app.UseCors("DevCorsPolicy");发布于 2021-06-05 19:42:00
var client = new HttpClient();
var request = new HttpRequestMessage
{
Method = new HttpMethod("GET"),
RequestUri = new Uri($"{site.BaseUrl}robots.txt")
};
request.Headers.Add("Accept", "text/plain");
request.SetBrowserRequestMode(BrowserRequestMode.NoCors);
var response = await client.SendAsync(request);
var txt = await response.Content.ReadAsStringAsync();参考文献
https://stackoverflow.com/questions/64858434
复制相似问题