The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

Question

My application is working fine in IE browser, But it's not working in Chrome browser due to CORS issue.

The issue is

Failed to load http://localhost:52487/api/Authentication/: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I am using angular 2 in front-end and using Asp.net core 1.0 in back-end. I have tried

This is my startup code

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll", p =>
        {
            p.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
    });

    // Add framework services.
    services.AddMvc();
    // Add functionality to inject IOptions<T>
    services.AddOptions();
    // Add our Config object so it can be injected
    services.Configure<Data>(Configuration.GetSection("Data"));

    services.Configure<COCSettings>(Configuration.GetSection("COCSettings"));

    services.Configure<EmailSettings>(Configuration.GetSection("EmailSettings"));

    AppSettings.ConnectionString = Configuration["Data:DefaultConnectionString"];

    // *If* you need access to generic IConfiguration this is **required**
    services.AddSingleton<IConfiguration>(Configuration);

    // Injecting repopsitories with interface
    AddServices(services);

    // Add Json options
    services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    app.UseMiddleware(typeof(ErrorHandling));
    app.UseMiddleware(typeof(GetNoCache));
    app.UseCors("AllowAll");
    app.UseMvc();
}

this is how I am calling the API from UI(angular) side

constructor(private http: Http) {
    this.headers = new Headers();
    this.headers.append('Accept', 'application/json');
}

GetMaintainCOC(FYONId) {
    return this.http.get(this.apiUrl + 'GetCertificationofConformity?FYONId=' + FYONId, { withCredentials: true })
    .map(responce => <any>responce.json())
    .catch(error => {
        return Observable.throw(error);
    });
}

Solution 1

It is working, when I am calling AllowCredentials() inside of AddPolicy

 services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", p =>
                {
                    p.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials();
                });
            });

I got this key of idea from Access-Control-Allow-Origin: "*" not allowed when credentials flag is true, but there is no Access-Control-Allow-Credentials header

What I understood

I am using { withCredentials: true } in angular http service call. So I guess I should use AllowCredentials() policy in CORS service.

Solution 2

Well you appear to have it solved, but here's the simple answer.

If you set the withCredentials flag in the request definition, cookies etc. will be passed in the request. Otherwise they won't be passed.

If your server returns any Set-Cookie response headers, then you must also return the Access-Control-Allow-Credentials: true response header, otherwise the cookies will not be created on the client. And if you're doing that, you need to also specify the EXACT origin in the Access-Control-Allow-Origin response header, since Access-Control-Allow-Origin: * is not compatible with credentials.

So do this:

• Pass withCredentials in request
• Pass Access-Control-Allow-Origin: <value-of-Origin-request-header> response header
• Pass Access-Control-Allow-Credentials: true response header

Comments

[chaitanyasingu]

AllowAnyOrigin does not work with AllowCredentials. need to have specfiic origin