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.

techblu3 · Accepted Answer · 2016-03-21 07:14:12Z

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

edited Mar 21, 2016 at 7:14

answered Mar 21, 2016 at 6:52

techblu3

1709 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anevil Over a year ago

May I know what reply shall I made ? this is the one that I put in Global.asax but also not working : protected void Application_BeginRequest(object sender, EventArgs e) { if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") { Response.Flush(); } }

techblu3 Over a year ago

I have update the answer @anevil . Also note that my.requestmaking-site.com is the base url of the page you are trying to make the request from (I am not very sure if it will work with localhost, normally you use domains in such cases)

anevil Over a year ago

tq sir. actually where those headers should be placed ? on the requester or the service? I already have it in the WCF service's EnableCORSBehaviour. So just changed the "Access-control-methods to" header key but bo luck, still the same error.

AhammadaliPK · Accepted Answer · 2016-03-24 13:43:04Z

0

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>

answered Mar 24, 2016 at 13:43

AhammadaliPK

3,5484 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular post to WCF with parameter CORS error

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related