Nancy + .NET Core enable CORS not working

Question

I have the following request on the clientside:

$.get(getUrl)

I have tried the following on the backend:

Is it possible to enable CORS using NancyFX?

I have also tried these four approaches (separately, hence commented out):

        // protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
    // {
    //     pipelines.AfterRequest += ctx =>
    //     {
    //         ctx.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    //         ctx.Response.Headers.Add("Access-Control-Allow-Headers", "*");
    //         ctx.Response.Headers.Add("Access-Control-Allow-Methods", "*");
    //     };
    // }

    protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
    {
        pipelines.AfterRequest += (ctx) =>
        {
            ctx.Response.Headers.Add("Access-Control-Allow-Origin", "*");
        };
    }

    protected override void RequestStartup(TinyIoCContainer container, IPipelines pipelines, NancyContext context)
    {
        base.RequestStartup(container, pipelines, context);

        // pipelines.AfterRequest.AddItemToEndOfPipeline((ctx) =>
        // {
        //     ctx.Response.WithHeader("Access-Control-Allow-Origin", "*")
        //         .WithHeader("Access-Control-Allow-Methods", "*")
        //         .WithHeader("Access-Control-Allow-Headers", "*");        
        // });

        // pipelines.AfterRequest += (ctx) =>
        // {
        //     ctx.Response.Headers.Add("Access-Control-Allow-Origin", "*");
        //     ctx.Response.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        // };

I have even tried for my module something like:

After += (Context) =>
{
    Context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    Context.Response.Headers.Add("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
    Context.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, x-requested-with, Authorization, Accept, Origin");
};

All yield the same:

XMLHttpRequest cannot load http://localhost:5000/registration/signup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5001' is therefore not allowed access. The response had HTTP status code 401.

The 401 is because I am not passing in a custom header that is expected. I am just trying to work around the CORS issue first

Answer 1

Welp. This was a two headed snake. I had resorted to trying a basic nodejs reverse proxy, and when that didn't work... it all made sense.

It does not seem some of the approaches I took with Nancy could have ever worked, as I have auth middleware code, which is hit/run before the bootstrapper code. So preflight requests would always get a 401 instantly (they don't send custom headers the middleware was checking for) and the code that enables CORS would never get hit.

HOWEVER, the other issue is this is localhost. Browsers do not allow CORS for localhost apparently. So the solution here is to use ngrok (not tested for this, but no reason it shouldn't work). OR run chrome with disabled web security flag set to false (this approach varies depending on the OS).

I tried the latter option, and to solve my Nancy CORS code not being run, I removed it all and went with the standard .NET Core CORS approach outlined here: https://docs.microsoft.com/en-us/aspnet/core/security/cors

Now my Access-Control-Allow-Origin header is being set, and chrome is running somewhat unsecurely. But it works.

I think for production I will be using a reverse proxy like NGINX. And all of this will seem like a distant memory...