How to transform request header such that I don't run into CORS error?

Question

I currently have a site which take in all ingoing request and forward them to the correct website.

This is currently setup via this Yarp configuration:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ReverseProxy": {
    "Routes": {
      "server": {
        "ClusterId": "old-site",
        "Match": {
          "Path": "{**catch-all}"
        }
      },
      "azure": {
        "ClusterId": "new-site",
        "Match": {
          "Path": "yarpb"
        }
      }
    },
    "Clusters": {
      "old-site": {
        "Destinations": {
          "server": {
            "Address": "https://test-www.a.com/"
          }
        }
      },
      "new-site": {
        "Destinations": {
          "yarpb": {
            "Address": "https://example.com/"
          }
        }
      }
    }
  }
}

The entry point is test.a.com and which according to the redirect rule above will redirect to test-www.a.com.

This is fine, and works as it is supposed.

One site that seems problematic now is the cms backoffice umbraco, test.a.com/umbraco, which sometimes fetches files from the app_plugins folder.

Some of these files are fetched with CORS

which is causing an issue when the original html request is being redirected to a different page.

Is it somehow possible let it pass through?

I have in the code tried this app.UseCors(x => x.AllowAnyOrigin()); but it does not seem to change anything?

its like this is being set after yarp redirect the request as yarp logging states 200 response, but the browser says 405?

Log snippet:

2022-06-21T17:48:02.6237461+02:00   INFO    [Yarp.ReverseProxy.Forwarder.HttpForwarder] [Forwarding]    Proxying to https://test-www.a.com/App_Plugins/RJP.MultiUrlPicker/MultiUrlPicker.html HTTP/2 RequestVersionOrLower no-streaming
2022-06-21T17:48:02.6255128+02:00   INFO    [Yarp.ReverseProxy.Forwarder.HttpForwarder] [ResponseReceived]  Received HTTP/2.0 response 301.
2022-06-21T17:48:02.6256100+02:00   INFO    [ReverseProxy.Middleware.RequestResponseLoggerMiddleware]   [LogRequest]    https://test.a.com/App_Plugins/RJP.MultiUrlPicker/MultiUrlPicker.html proxied to https://test-www.a.com//App_Plugins/RJP.MultiUrlPicker/MultiUrlPicker.html
2022-06-21T17:48:02.6273081+02:00   INFO    [Yarp.ReverseProxy.Forwarder.HttpForwarder] [ResponseReceived]  Received HTTP/2.0 response 200.

entire program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddReverseProxy().LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));
builder.Services.AddLogging(x =>
{
    x.AddJsonConsole();
    x.AddFile($"logs/app-{DateTime.UtcNow:yyyyMMddHHmmss}.log", append: true);
});

var app = builder.Build();


app.UseStaticFiles();
app.UseRouting();
app.UseCors(x => x.AllowAnyOrigin());

app.MapReverseProxy(proxyPipeline =>
{
    proxyPipeline.UseRequestResponseLogging();
});

app.Run();

Answer 1

So after some investigation i finally managed to fix the issue via yarp, by modifiying the response header location to be the same as the request header.

.AddTransforms(builderContext =>
{
    builderContext.AddResponseTransform(async context => {
    if (context.HttpContext.Response.StatusCode == 302 || context.HttpContext.Response.StatusCode == 301)
    {
        if (context.ProxyResponse == null)
        {
            return;
        }

        var proxyResponse = context.ProxyResponse.Headers;
        var oldLocation = context.HttpContext.Response.GetTypedHeaders().Location;

        if (oldLocation == null)
        {
            return;
        }

        var oldLocationScheme = oldLocation.Scheme;
        var oldLocationHost = oldLocation.Host;
        var oldLocationsPath = oldLocation.AbsolutePath;
        var newLocation = new UriBuilder()
        {
            Scheme = oldLocationScheme,
            Host = oldLocationHost,
            Path = oldLocationsPath
        }.Uri;

        context.HttpContext.Response.GetTypedHeaders().Location = proxyResponse.Location = newLocation;
        context.SuppressResponseBody = true;
    }
});

Answer 2

From the documentation it seems that you need to map your entries to use CORS by calling RequireCors method.

It also seems that it is better for you to construct a policy, add the desired origins to that policy and then map your entries to the policy. That way - any change to the policy will immediately affect all registered end-points.

Also, beware that when you are using a wildcard inside your CORS config, you may disable other functionality in modern browsers (MDN to the rescue). So please - try to specify your own domain to ensure everything works as excepted

Answer 3

Add following in Configure

app.UseCors(options => options.SetIsOriginAllowed(x => _ = true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());

Answer 4

Add this to service in ConfigureServices:

        services.AddCors(options =>
        {
            options.AddDefaultPolicy(
            builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
        });