Aravind Aravind - 3 months ago 64
AngularJS Question

wcf rest and angularjs 400 BAD request error during post

On button click this function is called

$scope.CreateNewTopic = function () {
var userdata = {
"TopicName":$scope.topicname,
"TopicDescription": $scope.topicdescription,
"OriginalPosterID": $scope.userid,
"CategoryID": $scope.selectedcategory.CategoryID
};
DataService.InsertTopic(userdata);
};


My Angular Service method

angular.module('DFApp').factory('DataService', function ($http, $log) {
var connectionurl = 'http://localhost:8020/DFServices.svc/'
return {
InsertTopic: function (topic) {
$http({
method: 'POST',
url: connectionurl + 'InsertNewTopic',
contentType: "application/json; charset=utf-8",
data: topic,
})
.success(function (data, status, headers, config) {
// successcallback(data);
console.log(data);
})
.error(function (data, status, headers, config) {
$log.warn(data, status, headers, config);
})
},

}
});


WCF Method

public int InsertNewTopic(InsertNewTopic InsertTopicObject) {

return SqlHelper.ExecuteNonQuery(SqlConnectionString.GetConnection(), CommandType.StoredProcedure, Constants.DF_InsertNewTopic.ToString(), new SqlParameter("TopicName", InsertTopicObject.TopicName), new SqlParameter("TopicDescription", InsertTopicObject.TopicDescription), new SqlParameter("OriginalPosterID", InsertTopicObject.OriginalPosterID), new SqlParameter("CategoryID", InsertTopicObject.CategoryID));

}


Corresponding interface

[OperationContract]
[WebInvoke(Method = "POST", UriTemplate = "/InsertNewTopic", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
int InsertNewTopic(InsertNewTopic InsertTopicObject);


InsertNewTopic is Datacontract as below

[DataContract]
public class InsertNewTopic
{
[DataMember]
public string TopicName { get; set; }
[DataMember]
public string TopicDescription { get; set; }
[DataMember]
public string OriginalPosterID { get; set; }
[DataMember]
public int CategoryID { get; set; }
}


Web Config file

<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" maxRequestLength="2147483647" />
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>
</system.web>
<system.serviceModel>
<services>
<service name="DF.ServiceApi.DFServices" behaviorConfiguration="webHttpBehaviour">
<endpoint binding="webHttpBinding" contract="DF.ServiceApi.IDFServices" behaviorConfiguration="webEndPointBehaviour"
bindingConfiguration="webDFBinding"></endpoint>
<endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />
</service>
</services>
<behaviors>
<endpointBehaviors>
<behavior name="webEndPointBehaviour">
<webHttp/>
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior name="webHttpBehaviour">
<!-- To avoid disclosing metadata information, set the values below to false before deployment -->
<serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
<serviceThrottling maxConcurrentCalls="100" maxConcurrentInstances="10" maxConcurrentSessions="5" />
<serviceTimeouts transactionTimeout="00:20:00" />

<!-- To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information -->
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<bindings>
<webHttpBinding>
<binding name="webDFBinding" closeTimeout="00:20:10" openTimeout="00:20:00" sendTimeout="00:20:00" receiveTimeout="00:20:00" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" transferMode="Streamed" maxBufferSize="2147483647"
contentTypeMapper=""
>
<readerQuotas maxArrayLength="2147483647" maxBytesPerRead="4096" maxNameTableCharCount="2147483647" maxDepth="32" maxStringContentLength="8192" />
<security mode="None">
</security>
<!--<security mode="Transport">
<transport clientCredentialType="None" />
</security>-->
</binding>
</webHttpBinding>
</bindings>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" closeIdleServicesAtLowMemory="true" multipleSiteBindingsEnabled="true" />
<standardEndpoints>
<!--<webHttpEndpoint>
<standardEndpoint name="" contentTypeMapper="Microsoft.Samples.WebContentTypeMapper.JsonContentTypeMapper, JsonContentTypeMapper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
</webHttpEndpoint>-->
</standardEndpoints>
<protocolMapping>
<add scheme="http" binding=""/>

</protocolMapping>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<!--
To browse web app root directory during debugging, set the value below to true.
Set to false before deployment to avoid disclosing web app folder information.
-->
<directoryBrowse enabled="true" />
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<!-- Inserted below code for enabling Webservices to allow CORS - Cross Origin Resource Sharing -->
<httpProtocol>
<customHeaders>
<!--<add name="Access-Control-Allow-Origin" value="*"/>-->
</customHeaders>
</httpProtocol>
</system.webServer>


The image shows my error as in the network call of the developer tools.
enter image description here
And to run my webservices I am using WebMatrix.
I wish some one to help me as my days are wasted like a hell.

Answer

It's a CORS issue, which should be fixed from the WCF service side,

First you must enable CORS on web.config

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

OPTIONS requests you must reply with empty response, adding in your application class:

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}
Comments