ASP.NET Core Web Api sending Access-Control-Allow-Origin: null CORS header and chrome is erroring, how to fix?

Question

Yesterday I managed to have my API working on my local computer, however today (same code) on another computer, it's not working, I am getting this error on the console:

Failed to load http://localhost:52056/api/task : The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Here is the http request and response on Chrome:

(I don't see errors in IE/Firefox)

Here is my startup class (using .net core 2)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using TodoApi;

namespace TestCors
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSingleton<ITaskWarehouse, TaskWarehouse>();

            services.AddCors();
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors(builder => builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            app.UseMvc();
        }
    }
}

What is wrong here? The code is the same from yesterday, however I was running on Windows 10 and this machine has Windows 7. Any thoughts? Thanks

Answer 1

Try removing

.AllowCredentials()

CORS doesn't allow you to have . AllowCredentials() AND .AllowAnyOrigin() for the same policy. I don't why it worked on a different machine.

This is from ASP.NET page

The CORS spec also states that setting origins to "*" is invalid if SupportsCredentials is true.

Answer 2

The problem is your are opening html page which makes this request by just double clicking on it, without using a server. So url in your browser is "file:///...". That means there is no origin, and as you see on screenshot from your question - CORS request has "Origin: null" header. Different browsers handle this siutation differently. Chrome restricts cross-origin requests from such origin, even if response allows it (via returning "null" as "Access-Control-Allow-Origin").

So to fix - use proper server (local one), or use another browser for development. Also some people claim that starting chrome like this

chrome.exe --allow-file-access-from-files

Should also "fix" this, though I didn't try myself.

Update: I was under impression that even with Access-Control-Allow-Origin: * chrome will not allow it, but your comment on other answer seems to claim otherwise (by removing AllowCredentials() you made response to use "*" as allowed origin instead of origin provided in request). If so - that's another way to fix it (not sure, maybe it behaves differently in different chrome versions though).