CORS errors on PUT request between Angular 4 app and MVC WebAPI

Question

I am trying to figure out what is causing the issues between my angular applications and MVC web API application.

In my webapiconfig.cs I am enabling CORS as follows:

var corsAttr = new EnableCorsAttribute("http://localhost:4200,http://domain1,http://domain2", "*", "*");
corsAttr.SupportsCredentials = true;

// Enable CORS Globally 
config.EnableCors(corsAttr);

I am performing the PUT request using something like:

updateExchange(exchange: IOrder): Observable<IOrder> {
  return this._http.put<IOrder>(this._orderServiceUrl + '/' + order.Id, order)
    .do(this.handleSuccessResponse)
    .catch(this.handleErrorResponse);
}

I'm not really sure if this matters but in my requests I am sometimes returning different status codes based on the error.

Response to preflight request doesn't pass access control check: 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 getting back a successful response but in the response headers, I do not see any CORS headers:

    Cache-Control:private
    Date:Mon, 02 Oct 2017 15:37:31 GMT
    Server:Microsoft-IIS/10.0
    Transfer-Encoding:chunked
    X-AspNet-Version:4.0.30319
    X-Powered-By:ASP.NET
    X-SourceFiles:=?UTF-8?<something>

Any suggestion on what should I do to get this working?

score 1 · Answer 1 · answered Oct 02 '17 at 17:54

1

Response should only have the accepted headers in Access-Control-Allow-Headers, don't use wildcard. There are security concerns to this, and that's why you are getting the error.

refer to the answer in this post for more information on why this is a bad practice. It is an angular.js post, but the CORS aspect applies

answered Oct 02 '17 at 17:54

FussinHussin

1,718
4
19
39

The reason I have a wildcards over there is b/c otherwise I am getting error: Server cannot set status after HTTP headers have been sent. – AlexanderM Oct 02 '17 at 18:32
Btw, from the documentation attached to one of the answers I see only concern for Origins, now Headers. Either way the problem here is that response headers does not have any headers at all even everything is specified according to ms documentation (or I am missing something). – AlexanderM Oct 02 '17 at 18:38
alright, hmmm. well that can't be right, could you post more of your code maybe? have you had a look at this post, https://stackoverflow.com/questions/29709477/server-cannot-set-status-after-http-headers-have-been-sent-web-api-cors – FussinHussin Oct 02 '17 at 18:45
Never mind, I just find it out: when we setup this API for the 1st time for whatever reason there was a code to flush headers on options request (person who set it up doesn't remember why).For whatever reason it doesn't duplicate headers for get but does for post and put. I ust happened to write very 1st Put request for that API. I removed that code and sees to be good now. While the post wasn't right it made my thoughts flow in the right direction. – AlexanderM Oct 02 '17 at 18:52
glad you figured it out – FussinHussin Oct 02 '17 at 18:53

score 0 · Answer 2 · answered Aug 15 '19 at 10:02

Search your code, maybe you add the header twice, that what was happend to me...

We did

var corsAttr = new EnableCorsAttribute("http://localhost:4200,http://domain1,http://domain2", "*", "*");
corsAttr.SupportsCredentials = true;
config.EnableCors(corsAttr);

And in another place:

        With filterContext.RequestContext.HttpContext.Response
            .AddHeader("Access-Control-Allow-Origin", "*");
            .AddHeader("Access-Control-Allow-Methods", "*");
            .AddHeader("Access-Control-Allow-Headers", "*");
        End With

CORS errors on PUT request between Angular 4 app and MVC WebAPI

2 Answers2