ASP.NET Core Swagger not working in Chrome with CORS error

Question

I've been following the help for ASP.NET Web API Help Pages using Swagger and I receive the following error in Chrome:

• Can't read from server. It may not have the appropriate access-control-origin settings.

It works in IE10 however it doesn't appear to pick up changes.

I found the following entry Can't read swagger JSON from http://localhost:9000/api-docs/ unfortunately it refers to changing it under grunt when it now works under gulp.

I've also tried to change the CORS setting in ASP.NET core:

 public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddApplicationInsightsTelemetry(Configuration);

        services.AddMvc();

        // Inject an implementation of ISwaggerProvider with defaulted settings applied
        services.AddSwaggerGen();


        services.ConfigureSwaggerGen(options =>
        {
            options.SingleApiVersion(new Info
            {
                Version = "v1",
                Title = "Status API",
                Description = "A simple example ASP.NET Core Web API!",
                TermsOfService = "None",
                Contact = new Contact { Name = "A Persone", Email = "[email protected]", Url = "http://www.some-company.com/" },
                License = new License { Name = "Use under LICX", Url = "http://url.com" }
            });
        });

        services.AddCors(options =>
        {
            options.AddPolicy("AnyOrigin", builder =>
            {
                builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod();
            });
        });
    }

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        app.UseApplicationInsightsRequestTelemetry();

        app.UseApplicationInsightsExceptionTelemetry();

        app.UseMvc();

        // Enable middleware to serve generated Swagger as a JSON endpoint
        app.UseSwagger();

        // Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
        app.UseSwaggerUi();

        app.UseCors("AnyOrigin");

    }

Unfortunately that doesn't make any difference.

Suggestion on how to solve it by changing the gulp settings or the .NET changes would be very welcome

Answer 1

Usually this should do the trick, you just need it to have the same policy name. I don't think adding the filters is necessary, if you want to apply it to all requests/routes.

// ConfigureServices
services.AddCors(options =>
{
    options.AddPolicy("AnyOrigin", builder =>
    {
        builder
            .AllowAnyOrigin()
            .AllowAnyMethod();
    });
});

// Configure
app.UseCors("AnyOrigin");
// Register other middleware here, like UseMvc or UseStaticFiles, depending on if you 
// want StaticFiles to be affected by cors or not you put it before or after the UseCors call

Update

Like mentioned in the comments above, the middlewares are executed in the order in which they are registered. The request reaches your APi controller before the Cors middleware ever receives it.

Your Configure method has to look like this instead:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();

    app.UseApplicationInsightsRequestTelemetry();

    app.UseApplicationInsightsExceptionTelemetry();

    // it must be placed before UseMvc and before or after
    // UseStaticFiles, depending on if you want the static files to be 
    // Cors enabled or not 
    app.UseCors("AnyOrigin");

    app.UseMvc();

    // Enable middleware to serve generated Swagger as a JSON endpoint
    app.UseSwagger();

    // Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
    app.UseSwaggerUi();
}