CORS Policy with WASM

Question

CORS Policy with WASM

Balu Raju 81

What is the requirement to have Blazor WASM call Web API hosted on the web server.
I have Web API hosted already on the web server which is good with Blazor server app,
Now I have the same service called by Blazor WASM, i get teh following error
"has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

what are the steps I need to take to resolve the issue? documentation is very sparse

AgaveJoe 30,126 Reputation points

2022-06-24T17:10:26.947+00:00

what are the steps I need to take to resolve the issue?

Enable CORS in the Web API application. The openly published documentation covers how to enable CORS.

Enable Cross-Origin Requests (CORS) in ASP.NET Core
Anonymous

2022-06-27T05:50:35.467+00:00
Hi @Balu Raju ,

what are the steps I need to take to resolve the issue?

Check the Web API application, it should be enabled CORS, if that is the case, you need to set the allowed origins.

Like this: in the WebAPI program.cs or Startup.cs file

builder.Services.AddCors(options => { options.AddDefaultPolicy( policy => { policy.WithOrigins("{the Blazor WASM origins}"); //set the allowed origin }); });

Or allow any origins:

builder.Services.AddCors(options => { options.AddDefaultPolicy( policy => { policy.AllowAnyOrigin(); //set the allowed origin }); });

More detailed information, see Enable Cross-Origin Requests (CORS) in ASP.NET Core.

Best regards,
Dillion
Balu Raju 81 Reputation points

2022-06-27T15:41:46.323+00:00

I used the "AllowAnyOrigin()" for now to see if that works. It still does not work.
is this the only step that I Need to do.
AgaveJoe 30,126 Reputation points

2022-06-27T15:55:54.983+00:00

The official documentation clearly and openly illustrates how to enable CORS. The community cannot see your code or project. Is there any way you can provide an example the community can run and reproduce the issue?

Also, a CORS error can show up if the code returns an HTML error page. Please use the browser's dev tools to check the HTTP response. Read then fix the error if you see an HTML error page.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2022-06-27T19:42:51.383+00:00

along with errors, cookie authentication can also cause a CORS error. If using authentication, be sure its JWT bearer tokens, and response is 401 on authentication errors. the browsers network trace will show this.
JONASE 1 Reputation point

2022-08-11T22:01:55.893+00:00

On your program.cs file in your webApi

builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
policy =>
{
policy.AllowAnyOrigin(); //set the allowed origin
});
});

app.UseCors();

Your answer

AgaveJoe 30,126 Reputation points

2022-06-24T17:10:26.947+00:00

what are the steps I need to take to resolve the issue?

Enable CORS in the Web API application. The openly published documentation covers how to enable CORS.

Enable Cross-Origin Requests (CORS) in ASP.NET Core
Anonymous

2022-06-27T05:50:35.467+00:00

Hi @Balu Raju ,

what are the steps I need to take to resolve the issue?

Check the Web API application, it should be enabled CORS, if that is the case, you need to set the allowed origins.

Like this: in the WebAPI program.cs or Startup.cs file

builder.Services.AddCors(options => { options.AddDefaultPolicy( policy => { policy.WithOrigins("{the Blazor WASM origins}"); //set the allowed origin }); });

Or allow any origins:

builder.Services.AddCors(options => { options.AddDefaultPolicy( policy => { policy.AllowAnyOrigin(); //set the allowed origin }); });

More detailed information, see Enable Cross-Origin Requests (CORS) in ASP.NET Core.

Best regards,
Dillion
Balu Raju 81 Reputation points

2022-06-27T15:41:46.323+00:00

I used the "AllowAnyOrigin()" for now to see if that works. It still does not work.
is this the only step that I Need to do.
AgaveJoe 30,126 Reputation points

2022-06-27T15:55:54.983+00:00

The official documentation clearly and openly illustrates how to enable CORS. The community cannot see your code or project. Is there any way you can provide an example the community can run and reproduce the issue?

Also, a CORS error can show up if the code returns an HTML error page. Please use the browser's dev tools to check the HTTP response. Read then fix the error if you see an HTML error page.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2022-06-27T19:42:51.383+00:00

along with errors, cookie authentication can also cause a CORS error. If using authentication, be sure its JWT bearer tokens, and response is 401 on authentication errors. the browsers network trace will show this.
JONASE 1 Reputation point

2022-08-11T22:01:55.893+00:00

On your program.cs file in your webApi

builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
policy =>
{
policy.AllowAnyOrigin(); //set the allowed origin
});
});

app.UseCors();

Share via

CORS Policy with WASM

Your answer