ASP .NET Core CORS issue with Google authentication on redirect

Question

Been following this tutorial in order to implement Google authentication in my web API but on the client side (using React and axios to do the request) the authentication process gets interrupted with this CORS issue and I'm struggling to sort it out:

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?(etc)' (redirected from 'https://localhost:44320/Photo/b997d788-3812-41d0-a09d-1a597eee9bad') from origin 'https://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is the Startup.cs file:

namespace rvc
{
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(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
            });
        });
        
        services.AddAuthentication(options =>
        {
            options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        }).AddCookie(options =>
        {
            options.LoginPath = "/account/google-login";
        }).AddGoogle(options =>
        {
            options.ClientId = "clientId";
            options.ClientSecret = "secret";
        });
        
        services.AddScoped<PhotoService>();
        services.AddScoped<TagService>();
        services.AddScoped(_ => new BlobServiceClient(Configuration.GetConnectionString("AzureBlobStorage")));
        services.AddDbContext<Data.DataContext>(x => x.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
        services.AddControllers().AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
        });
        services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo { Title = "rvc", Version = "v1" }); });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseSwagger();
            app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "rvc v1"));
        }

        app.UseHttpsRedirection();

        if (env.IsProduction())
        {
            app.UseSpa(spa => { });

            app.UseFileServer(new FileServerOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "client")),
                EnableDefaultFiles = true
            });
        }

        app.UseRouting();
        app.UseCors();
        app.UseAuthentication();
        app.UseAuthorization();
        app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
    }
}
}

The Route("google-login") gets called but the Url.Action("GoogleResponse") is not reached. These are the Google Authentication methods:

namespace rvc.Controllers;

[AllowAnonymous, Route("account")]
public class AccountController : Controller
{ 
[Route("google-login")]
public IActionResult GoogleLogin()
{
    var properties = new AuthenticationProperties {RedirectUri = Url.Action("GoogleResponse")};
    return Challenge(properties, GoogleDefaults.AuthenticationScheme);
}

[Route("google-response")]
public async Task<IActionResult> GoogleResponse()
{
    var result = await HttpContext.AuthenticateAsync(CookieAuthenticationDefaults.AuthenticationScheme);

    var claims = result.Principal?.Identities.FirstOrDefault()
        ?.Claims.Select(claim => new
    {
        claim.Issuer,
        claim.OriginalIssuer,
        claim.Type,
        claim.Value
    });

    return Json(claims);
}
}

Answer 1

This is probably because from the server you use redirect, which triggers CORS (even if from your server you allow it). you have to return the redirect URL to your front-end in some other way, capture it from the front-end app and then call the URL you need to invoke.