Access-Control-Allow-Origin error when connecting to web service

Hi I know there is a lot of questions about Access-Control-Allow-Origin and CORS but haven't exactly found something for my issue. I don't have any experience with CORS so any help will be appreciated. I have a ionic app which I want to use to connect to a WCF web service on a website domain. I also have connected to the service locally on my localhost and it worked, but not when connecting to the domain with my localhost.

these are the errors I am getting.

GET http://www.website.com/webservice/Service.svc

XMLHttpRequest cannot load http://http://www.website.com/webservice/Service.svc. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8100' is therefore not allowed access. 
The response had HTTP status code 404.

coding

HTML:
  <p>{{Success + " " + Error}}</p>

Javascript:
.controller('DashCtrl', function($scope, $http) {
  $http.get("http://www.website.com/webservice/Service.svc")
  .success(function(data){
   $scope.Success = "SUCCESS!";
  })
  .error(function(data){
    $scope.Error = "ERROR!";
  });    

})

I am testing on my browser using ionic serve and I have tried connecting with Ionic view app

this I added in my WCF service

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
        <add name="Access-Control-Max-Age" value="1728000" />
    </customHeaders>
</httpProtocol>