Question

当我尝试连接angular2应用程序和asp.net webapi应用程序时，我面临与CORS相关的问题。

错误：- register：1从源'http://localhost:49457/api/UserDetails'到'http://localhost:4200'的XMLHttpRequest的访问已被CORS策略阻止：'Access-Control-Allow-Origin'标头包含多个值'http://localhost:4200 ，http://localhost:4200”，但只允许一个。

这是我的代码，用于通过我的angular2应用程序调用asp.net webapi网址进行连接：-

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);
          });
}

这是我的asp.net webapi代码，

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

实际上，当我运行asp.netwebapi服务器时，它是通过浏览器正确检索数据。而且我还启用了 webapiconfig.cs中的CORS，

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

在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>

在Webapiconfig.cs和web.config中启用CORS后，我也遇到相同的错误。

请说明我如何解决此错误，

Answer 1

使用EnableCorsAttribute方法中的http://localhost:4200替换"*"。

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

并从web.config中删除httpProtocol配置设置。

ASP.NET WebAPI服务器与angular2应用程序之间的通信面临错误

1 个答案: