CORS Error in Core and React when hosting in IIS

Question

Working on React + ASP.net Core, works fine on local host, When i hosted in IIS server, I am getting CORS error.

"Access to fetch at 'http://10.100.221.6:9037/authentication' from origin 'http://10.100.221.6:9039' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Here http://10.100.221.6:9037/authentication is my ASP.net Core application hosted in port 9037

http://10.100.221.6:9039 is my react application in port 9039

Following things already tried

1. Launch setting i have added URL in ASP.net Core "ReactWindowsAuth": { "commandName": "Project", "launchBrowser": true, "launchUrl": "weatherforecast", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "applicationUrl": "https://localhost:5001;http://localhost:5000; http://10.100.221.6:9039" }, "Docker": { "commandName": "Docker", "launchBrowser": true, "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}/weatherforecast", "publishAllPorts": true, "useSSL": true } } }

2. In appsetting, included CORS "AllowedHosts": "*", "CorsOrigins": [ "http://localhost:3000", "http://10.100.221.6:9039" ],

3. In react application also, Authentication-api added api

    const apiBase = "http://10.100.221.6:9037/authentication";
   
    class AuthenticationService {
    getRoles() {
    let request = Object.assign({}, requestBase, { method: "GET" });
    let url = `${apiBase}`;
    return fetch(url, request).then(handleResponse);
    }
    }
   

Answer 1

Follow below code Or Click Here

You missed following methods => AllowAnyMethod().AllowAnyHeader()

var builder = WebApplication.CreateBuilder(args);

    
    // Add services to the container.
    
    builder.Services.AddControllers();
    
    // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    //services cors
    builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
    {
        builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
    }));
    
    var app = builder.Build();
    
    if (app.Environment.IsDevelopment())
    {
        app.UseSwagger();
        app.UseSwaggerUI();
        
    }
       //app cors
        app.UseCors("corsapp");
        app.UseHttpsRedirection();
        app.UseAuthorization();
        //app.UseCors(prodCorsPolicy);
    
    
    
    app.MapControllers();
    
    app.Run();

Answer 2

For me, solution 3 worked: https://learn.microsoft.com/en-us/troubleshoot/developer/webapps/iis/health-diagnostic-performance/http-error-405-website

On IIS go to your API and click "Modules". Remove WebDAVModule from the list.

Answer 3

You can enable CORS On the ASP.NET Core side.

var  MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      {
                          builder.WithOrigins("http://example.com",
                                              "http://www.contoso.com");
                      });
});

// services.AddResponseCaching();

builder.Services.AddControllers();

var app = builder.Build();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseCors(MyAllowSpecificOrigins);

app.UseAuthorization();

app.MapControllers();

app.Run();

You can refer Microsoft document