.Net Core 2.1 CORS and Authorization with Firebase JWT

Question

I'm following this blog post on authenticating with firebase with .net Core 2 https://blog.markvincze.com/secure-an-asp-net-core-api-with-firebase/

(I realise i'm using .net core 2.1 but thinking it must be similar)

I'm using a React Frontend with a .net core 2.1 WebApi Backend.

I am able to hit the controller no problem, however once I try to add the authentication to startup.cs I then get a: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:4000 (Reason: CORS request did not succeed)

Works totally fine up until that point

My request is coming from http://localhost:3000

UPDATES------------------------------------------------------------------

As a side note, this works when using POSTMAN. I can authenticate with Firebase AND hit the controller without a problem

Also works in chrome. Seems to be an issue with the firefox browser

My Implementation (After Successful Firebase Login Frontend)

Axios Request

axois
.get("https://localhost:4000/v1/picture", {
  headers: {
    accept: "application/json",
    "Accept-Language": "en-US,en;q=0.8",
    "Content-Type": `multipart/form-data;`,
    Authorization: "Bearer " + localStorage.getItem("token") 
    //Is the above the correct way to pass a jwt to be authenticated backend? This is the full jwt returned by Firebase
  }
})

Startup.cs

services.AddCors(options =>
            {
                options.AddPolicy("AllowSpecificOrigin",
                    builder => builder.WithOrigins("http://localhost:3000")
                        .AllowAnyMethod()
                        .AllowAnyHeader());
            }
        );

        //https://blog.markvincze.com/secure-an-asp-net-core-api-with-firebase/
        services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddJwtBearer(options =>
            {
                options.Authority = "https://securetoken.google.com/mafirebaseapp";
                options.TokenValidationParameters = new TokenValidationParameters
                {
                    ValidateIssuer = true,
                    ValidIssuer = "https://securetoken.google.com/mafirebaseapp",
                    ValidateAudience = true,
                    ValidAudience = "mafirebaseapp",
                    ValidateLifetime = true
                };
            });

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
...

...
        app.UseCors("AllowSpecificOrigin");
        app.UseAuthentication();
        app.UseHttpsRedirection();
        app.UseMvc();
}

PictureController.cs

[Route("v1/picture")]
public class PictureController : Controller
{
    [Authorize]
    [HttpGet]
    public IActionResult GetPicture()
    {
        return Ok("Hi");
    }
}

I looked at another post which pointed out that the ordering of the methods made a difference so i don't think that's a problem.

Any help will be much appreciated!

Thanks!

I think the header names and values all need to be in quotes e.g. "accept": "application/json" (single or double quotes - it doesn't matter). Also, make sure you are using the correct quotes. I would use the same double quotes for all of them for consistency — Simply Ged
I hadn't thought of that. I'll give this a go. Having said that, I'm using the vscode prettify which actually stripped the quotes from those two fields. Thanks for your input =) — Coel Drysdale

Edwok Edwok · Accepted Answer · 2018-10-13T09:30:59

You can try to use a specify a CORS policy for a specific action, just add [EnableCors("AllowSpecificOrigin")] to you action.

.Net Core 2.1 CORS and Authorization with Firebase JWT

2 Answers