angularjs访问webapi总是出现 not allowed access

最近在学习angularjs，尝试通过调用webapi的时候，直接

    $http({
        method: "get",        
        url: "http://localhost:301/api/basic/get",
        dataType: 'JSONP'
    }).success(function (resultdata) {
        return resultdata ;
    }).error(function (error) {

    });

 这样子调用，是没有问题的。
 一旦尝试增加一个header的设置，就会出现错误。如下所示：
  $http({
        method: "get",        
        url: "http://localhost:301/api/basic/get",
        dataType: 'JSONP'

                    ,headers:{'Authorization':'Basic dHp5OjEyMw=='}
    }).success(function (resultdata) {
        return resultdata ;
    }).error(function (error) {

    });

        出现的错误信息是：
        XMLHttpRequest cannot load http://localhost:301/api/basic/get. The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:400, *', but only one is allowed. Origin 'http://localhost:400' is therefore not allowed access.


        我的web.config中的设置，已经增加了
          <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
              <add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

                这究竟是啥情况？

                有没有人碰到过？
                求解答

跨域问题 http://frabbit2013.blog.51cto.com/1067958/1254285/

这个问题有点奇怪，反复测试后，总算解决了。
原因就是：过犹不及。

我把web.config中的配置项

这个给删掉，然后就好了。还不太理解是为什么。

因为看到
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Headers:authorization
Access-Control-Allow-Origin:*
Access-Control-Allow-Origin:http://localhost:400
Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS
Cache-Control:no-cache
Content-Length:0
Date:Fri, 14 Apr 2017 16:10:18 GMT

所以尝试了一下，去掉一个多余的，保留WebApiConfig类中Register静态方法中的

var cors = new EnableCorsAttribute("http://localhost:400", "*", "*");
config.EnableCors(cors);

然后尝试重新访问，发现就可以获取数据了。

难道是因为这个地方的设置，和web.config中的设置重复了，而且没有被替换，而是叠加了？

不过，不管怎么样，算是解决了。