Angular post to WCF with parameter CORS error

Question

I am very new in angular. Right now I am having some problem on angular POST to WCF.

This is the WCF contract :

[OperationContract]    
    [WebInvoke(Method = "POST",
     ResponseFormat = WebMessageFormat.Json,
     RequestFormat = WebMessageFormat.Json,     
     UriTemplate = "/InsertJSONSTRING/")]

     void InsertJSONSTRING(DyeMaster value);

This is the angular controller

app.controller('UploadCOJSON', function ($scope, $http) {

    $scope.SendData = function () {

        function DYE() {
            this.DESCRIPTION;
            this.COLOR_CODE;
        }

        $scope.dye = new DYE();
        $scope.dye.DESCRIPTION = $scope.DESCRIPTION;
        $scope.dye.COLOR_CODE = $scope.COLOR_CODE;    

        var dataR = JSON.stringify($scope.dye);

        $http({
            url: "http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING",            
            method: "POST",            
            data: dataR,            
            dataType: "json",            
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        });
    }
});

This is the error :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING. This can be fixed by moving the resource to the same domain or enabling CORS.

Somehow when I excluding the parameter (data) , it is working without any error.

$http({
            url: "http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING",            
            method: "POST",                        
            dataType: "json",            
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        });

Note : Enabling CORS as per described here http://enable-cors.org/server_wcf.html has been implemented

Appreciate your kind helps.

Answer 1

you must look at your network tab in inspect element, it must be making an OPTIONS request before the POST request. You will need to reply to the options request on server end with CORS header.

When you don't send the data the browser must not be making an OPTIONS request, thus it is working in that case.

For option request in reply

Add these header

"Access-Control-Allow-Origin", "http://my.requestmaking-site.com"
"Access-Control-Allow-Methods", "POST, GET, OPTIONS"

optionally if you're allowing authentication

"Access-Control-Allow-Headers", "Content-Type, Authorization"
"Access-Control-Allow-Credentials", "true"

no need for sending anything in body of reply

Answer 2

Just add these parameters in the web.config file..

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"/>
      </customHeaders>
    </httpProtocol>