Add CORS support for MiniProfiler

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.

[NickCraver]

@pmccloghrylaing That’s the part I mean about “maybe it’s not a bool” - maybe it’s something other type (e.g. list) to support multiple origins (and it not being there/null is “off”)…whatever format we need to add a policy correctly (not in front of a comp to check APIs atm) - that make sense?

[pmccloghrylaing]

I’ve added a draft PR that still needs testing. @NickCraver I’ve added a single property to options and the rest is taken care of by the middleware. I didn’t find that I could do much with IConfigureOptions<CorsOptions> as it only allows you to create or get named CORS policies - it doesn’t provide access to all policies.