Skip to content

Add CORS support for MiniProfiler #502

Open
@pmccloghrylaing

Description

@pmccloghrylaing

Related to #332

MiniProfiler doesn't work out of the box when the UI application is on a different origin to the API application due to missing CORS support.
In order to get MiniProfiler working for an Angular application running from a different origin I had to set up the following:

  • Add CORS headers for MiniProfiler and handle OPTIONS requests so the MiniProfiler endpoints would succeed:
    app.Use(async (context, next) =>
    {
        if (context.Request.Path.StartsWithSegments(new PathString("/profiler"))) // Must match RouteBasePath
        {
            if (context.Request.Headers.TryGetValue("Origin", out var origin))
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", origin);
                if (context.Request.Method == "OPTIONS")
                {
                    context.Response.StatusCode = 200;
                    context.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
                    context.Response.Headers.Add("Access-Control-Allow-Methods", "OPTIONS, GET");
                    await context.Response.CompleteAsync();
                    return;
                }
            }
        }
    
        await next();
    });
    app.UseMiniProfiler();
  • Update our CORS policy to have .WithExposedHeaders("X-MiniProfiler-Ids"), otherwise X-MiniProfiler-Ids isn't available to the MiniProfiler UI:
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .WithOrigins(...)
                .WithMethods(...)
                .AllowAnyHeader()
                .WithExposedHeaders("X-MiniProfiler-Ids"));
    });
  • Add the MiniProfiler includes script to the UI application (data-path needed to include the host):
    <script async type="text/javascript" id="mini-profiler"
        src="http://localhost:15000/profiler/includes.min.js"
        data-path="http://localhost:15000/profiler/"
        data-position="Left"
        data-scheme="Light"
        data-controls="true"
        data-authorized="true"
    ></script>

Suggestions:

  • Add an option to UseMiniProfiler for setting a CORS policy for MiniProfiler
  • Add an extension method for CorsPolicyBuilder to Expose the X-MiniProfiler-Ids header
  • Update documentation with steps to support CORS including script snippet

I'd be happy to open up a PR for this issue if the suggestions are OK.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions