CODEWITHSUNDEEP
angularjswcf
anevil
anevil

Reputation: 847

Angular post to WCF with parameter CORS error

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.

Upvotes: 0

Views: 806

Answers (2)

AhammadaliPK
AhammadaliPK

Reputation: 3548

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>

Upvotes: 0

techblu3
techblu3

Reputation: 170

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

Upvotes: 1

Related Questions