Error facing on communication between asp.net webapi server and angular2 application

Question

I am facing the CORS related issue when i try to connect my angular2 application and asp.net webapi application.

Error:- register:1 Access to XMLHttpRequest at 'http://localhost:49457/api/UserDetails' from origin 'http://localhost:4200' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4200, http://localhost:4200', but only one is allowed.

Here is my code for connecting for calling asp.net webapi url through my angular2 app:-

User.service.ts

GetUser(userobj:user):Observable<User>  
{

return this.http.get<User>(`http://localhost:49457/api/UserDetails`,{responseType:"text"})  
.subscribe(
          function(response)
          {                    
        console.log("user details retreived successfully");
          },                
      function(error)
          { 
               console.log(error);
          });
}

This is my code for asp.net webapi,

 public class UserDetailsController : ApiController
    {
        private sampledbEntities dbentity = new sampledbEntities(); 
        // GET api/<controller>
        public IQueryable<Userdetail> GetUserdetails()
        {
            return dbentity.userdetails; 
        }
}

Actually when i run my asp.netwebapi server it is retrieving data correctly through browser.And also i have enabled CORS in webapiconfig.cs,

void Register(HttpConfiguration config)
{
 var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*");
            config.EnableCors(corsAttr);
}

in web.config.cs,

 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />  
     <add name="Access-Control-Allow-Headers" value="Origin, Content-Type, X-Auth-Token" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>  

After enabling CORS in Webapiconfig.cs and web.config also i am facing the same error.

Please clarify how do i come out of this error,

Answer 1

Replace http://localhost:4200 with "*" from EnableCorsAttribute method.

void Register(HttpConfiguration config)
{
    var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*");
    config.EnableCors(corsAttr);
}

and remove httpProtocol configuration settings from web.config.