Swagger settings to solve mixed content error

Question

I have a dotnet core web api that is documented by swagger. Here is how I set it up:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddHealthChecks();
        services.AddSingleton(sp =>
        {
            var options = new JsonSerializerOptions();
            options.Converters.Add(new DateTimeOffsetConverter());
            options.Converters.Add(new LabelDataConverter());
            return options;
        });
        services.AddCacheManager(Configuration);
        services.AddKafkaConsumers(Configuration);

        services.AddSwaggerGen(c =>
        {
            c.SwaggerDoc("v1", new OpenApiInfo { Title = "X.WebApi", Version = "v1" });
        });
        
        services.AddInfluxDb(options => Configuration.GetSection("InfluxDb").Bind(options));
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "X.WebApi v1"));

        app.UseRouting();

        app.UseAuthorization();

        app.UseHealthChecks("/health");

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });            
    }

I can run the endpoints by swagger ui on my local machine but when I deploy the application to server I'm getting TypeError: Failed to fetch errors. Here is what I see on browser's console:

swagger-ui-bundle.js:2 Mixed Content: The page at 'https://x.y.consul.z.com/swagger/index.html' was loaded over HTTPS, but requested an insecure resource 'http://x.y.consul.z.com/v1/Path/1'. This request has been blocked; the content must be served over HTTPS.

How should I update the swagger settings to be able to run without issue also on the server?

Make sure your code in Conifgure follows this example: docs.microsoft.com/en-us/aspnet/core/tutorials/… order matters... you have to put the swagger stuff before UseRouting... — Andy
i've used swagger/swashbuckle hundreds of times, and have never seen this error. It has to be something with how your Configure method is set up. You probably should show all the code in that method. — Andy
If you are running behind a proxy on your production environment then there is a strong possibility that the firewall/reverse proxy standing in front of dotnet core is configured to offload the ssl traffic. Thus you can end up serving https to the internet but your aspnetcore web app thinks is served using http. The only way to overcome this is through the app.UseForwardedHeaders();app.UseHttpMethodOverride();. — cleftheris

N Pinheiro N Pinheiro · Accepted Answer · 2021-02-18T20:32:44

When deployed, is your application exposed in HTTPS using a proxy server, load balancer or such?

If it is, then your problem may not be the Swagger itself, but losing the original HTTPS scheme when converting to HTTP. In fact, please check if you are able to call your API.

In this case, the solution may be as documented here. (Please, check this out, as there are some tweaks in the order of the middlewares and such.)

In short, you can try something like this:

public void ConfigureServices(IServiceCollection services)
{
    // Configure this as suited for your case
    services.Configure<ForwardedHeadersOptions>(options =>
    {
        // Processing all forward headers (the default is None)
        options.ForwardedHeaders = ForwardedHeaders.All;

        // Clearing known networks and proxies collections
        options.KnownNetworks.Clear(); 
        options.KnownProxies.Clear();
    });
    // ...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    // If you only specify this and don't perform the configuration
    // in "ConfigureServices", the default configuration is used
    app.UseForwardedHeaders();
    // ...
}

Swagger settings to solve mixed content error

1 Answers