CORS blocks direct access to API from Blazor - Stack Overflow

admin管理员组

文章数量:1334796

I've setup an Aspire solution with a Blazor WebAssembly and an API projects. API runs on https://localhost:7476 and Blazor is served from https://localhost:7077. Generally any API registered with MapPost or MapGet is working as expected because by default Blazor app runs in InteractiveServer mode, so all APIs appear to be called via internal SignalR connection.

However for uploading files from the web, I need to hit the API endpoint directly. I'm using RadzenUpload component to do so, and I've configured it to hit https://localhost:7476/api/upload

However the browser gives me an error:

Access to XMLHttpRequest at 'https://localhost:7476/api/upload' from origin 'https://localhost:7077' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried adding the following to both the API and the Blazor's Program.cs but that didn't help. Any help is greatly appreciated.

builder.Services.AddCors(o => o.AddPolicy("AllowAll", builder =>
{
    builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader();
}));

...

var app = builder.Build();

app.UseCors("AllowAll");

I've setup an Aspire solution with a Blazor WebAssembly and an API projects. API runs on https://localhost:7476 and Blazor is served from https://localhost:7077. Generally any API registered with MapPost or MapGet is working as expected because by default Blazor app runs in InteractiveServer mode, so all APIs appear to be called via internal SignalR connection.

However for uploading files from the web, I need to hit the API endpoint directly. I'm using RadzenUpload component to do so, and I've configured it to hit https://localhost:7476/api/upload

However the browser gives me an error:

Access to XMLHttpRequest at 'https://localhost:7476/api/upload' from origin 'https://localhost:7077' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried adding the following to both the API and the Blazor's Program.cs but that didn't help. Any help is greatly appreciated.

builder.Services.AddCors(o => o.AddPolicy("AllowAll", builder =>
{
    builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader();
}));

...

var app = builder.Build();

app.UseCors("AllowAll");

• blazor
• blazor-webassembly

Share Improve this question Follow asked Nov 20, 2024 at 4:19 beekeeperbeekeeper 62211 gold badge66 silver badges2121 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The error indicates the response from server lacks header Access-Control-Allow-Origin (which would be appended by app.UseCors() middleware), So you don't have to add the cors related codes in your blazor app,just add the codes in your webapi project

Also,try modify your policy to

builder.Services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
    builder.WithOrigins("https://localhost:{port of your blazor app}")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials();
}));
......

app.UseCors("MyPolicy");

if you are working on controller based webapi,notice the order of the middleware,follow the sample in official document

It now works on myside:

本文标签： CORS blocks direct access to API from BlazorStack Overflow