Why does CORS block my fetch in Bolero (F# Blazor) although configuration follows documentation?

222 views Asked by At

I am writing a Bolero (F# Blazor) application, and I am running into some issues regarding CORS when trying to challenge GitHub for authentication. I've handled similar CORS error messages in other languages previously, so CORS isn't that new to me. The message looks like this:

CORS error message

Going to the URL manually works just fine.

I've read and applied the documentation from Microsoft, as well as other SO posts with the same or similar problems, eg. this and this. I've created a repro which might be found on GitHub. These are the steps I've taken to reproduce the issue:

  1. Create the Bolero template bolero-app with both client and server.
  2. Change authentication to GitHub OAuth2.0 (AspNet.Security.OAuth.GitHub)
  3. Add CORS in Startup.fs. Both in Configure and ConfigureServices.

Reproducing issue when running the application:

  1. Run the application. I use dotnet run -p src/ReproGithubOAuth.Server.
  2. Navigate to the Download data page, open the console tab in the inspect view.
  3. Now you can click the Sign in button and should see the same error as the picture above.

This is how I challenge GitHub, through the remote service (see code here in GitHub):

signIn = fun () -> async {
    let! res = Async.AwaitTask (ctx.HttpContext.ChallengeAsync "GitHub")
    printfn $"res: {res}"
    // Do some parsing of request
    // Never gets this far, so returning whatever
    return option.Some "myusername"
}

As for the configuration in Startup.fs (see code here in GitHub):

member this.ConfigureServices(services: IServiceCollection) =
        let configureCors (builder: Infrastructure.CorsPolicyBuilder) = 
            builder.WithOrigins("http://localhost:5000")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials()
                |> ignore
...
        services.AddCors(fun options ->
            options.AddPolicy("_allowSpecificOrigins", configureCors)
        ) |> ignore
        services
            .AddAuthorization()
            .AddAuthentication(fun options ->
                options.DefaultAuthenticateScheme <- CookieAuthenticationDefaults.AuthenticationScheme
                options.DefaultSignInScheme <- CookieAuthenticationDefaults.AuthenticationScheme
                options.DefaultChallengeScheme <- "GitHub"
            )
                .AddCookie(fun config ->
                    config.Cookie.SameSite <- SameSiteMode.None
                    config.Cookie.SecurePolicy <- CookieSecurePolicy.Always
                )
                .AddGitHub(fun options ->
                    options.ClientId <- "GitHub ClientId should be here";
                    options.ClientSecret <- "GitHub Client Secret should be here"; 
                    options.CallbackPath <- new PathString("/github-oauth");
                    options.AuthorizationEndpoint <- "https://github.com/login/oauth/authorize";
                    options.TokenEndpoint <- "https://github.com/login/oauth/access_token";
                    options.UserInformationEndpoint <- "https://api.github.com/user";
                )
                .Services
         |> ignore
...

member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =
        // Putting UseCors() after UseRouting() according to 
        // https://stackoverflow.com/a/65937838/12094643
        app
            .UseRouting()
            .UseCors("_allowSpecificOrigins")
...

I've tried a bunch of stuff. I've basically tried all the fixes in the posts I've read so far except this post saying that I should use await Http.GetJsonAsync<put here your return type>("/api/Login/Test");, which just doesn't make sense to me when challenging GitHub from the remote service.

Appreciate all help that I can get <3

0

There are 0 answers