Member_2_8194302
asked on
Receiving Error 400 when POSTing from Angular5 to WCF REST service
We are trying to POST to a WCF REST method. We can successfully POST using SoapUI, Postman, and YARC but when we try in Angular 5 I'm receiving a NULL object.
Client code:
Server-side logic:
Web config:
We have ruled out CORS as a potential issue. We have also tried various combinations of JSON.stringify() v/s a JSON object, as well as variations on the WebMessageBodyStyle, all to no avail.
Client code:
const headers: any = {'Content-Type': 'application/json'};
return this.ajax.request<any>({
url: url,
method: method (POST),
headers: headers,
options: {
body: JSON.stringify(req.body)
}
});
}
public request<T>(req: AjaxRequest): Observable<HttpEvent> {
return this.http.request<T>(req.method, req.url, req.options)
}
//this.http = HttpClient
// Component
public onNext(event: any): void {
this._saveInfo(getInsertDmgReqPayload({
data: event.value,
dmgInfo: this.responses['dmg'],
emailId: this.util.getQueryStringValue('uname')
}));
this.util.navigate('education');
}
private _saveInfo(data: any): void {
this.appraisal.request('saveDmgInfo', null, {body: data})
.subscribe(v => {
console.log(v);
});
}
Server-side logic:
// WCF Interface definition
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
Result InsertDemographicInfo(Demographic d);
// Service code
public Result InsertDemographicInfo(Demographic d) // The Demographic object is null when posting from Angular
{
Result result = new Result();
try
{
DemographicFactory.InsertDemographicInfo(d);
result.Status = "Success";
}
catch (Exception ex)
{
result.Status = "Fail";
result.Message = ex.Message;
}
return result;
}
Web config:
<system.serviceModel>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
<extensions>
<behaviorExtensions>
<add name="crossOriginResourceSharingBehavior" type="YTL.CORSEnablingBehavior, YTL, Version=1.0.0.0, Culture=neutral" />
</behaviorExtensions>
</extensions>
<behaviors>
<serviceBehaviors>
<behavior>
<serviceMetadata httpGetEnabled="True" httpsGetEnabled="True" />
<serviceDebug includeExceptionDetailInFaults="True" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="JSONEndpointBehavior">
<webHttp defaultOutgoingResponseFormat="Json" helpEnabled="true" />
<crossOriginResourceSharingBehavior />
</behavior>
</endpointBehaviors>
</behaviors>
<bindings>
<wsHttpBinding>
<binding name="wsHttpBinding" maxReceivedMessageSize="65535" sendTimeout="00:00:30" />
</wsHttpBinding>
<webHttpBinding>
<binding name="webHttpBinding" maxReceivedMessageSize="65535" sendTimeout="00:00:30" />
</webHttpBinding>
</bindings>
<services>
<service name="YTL.YTL">
<host>
<baseAddresses>
<add baseAddress="http://localhost:5100/YTL/" />
</baseAddresses>
</host>
<endpoint address="REST" binding="wsHttpBinding" contract="YTL.IYTL" />
<endpoint address="JSON" binding="webHttpBinding" contract="YTL.IYTL" behaviorConfiguration="JSONEndpointBehavior" />
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
</service>
</services>
</system.serviceModel>
We have ruled out CORS as a potential issue. We have also tried various combinations of JSON.stringify() v/s a JSON object, as well as variations on the WebMessageBodyStyle, all to no avail.
Use a sniffer like Fiddler or Wireshark on your development machine to see the difference between your post in your Angular application and e.g. Postman.
Why are you not using HTTPClient for your request
You are using it here but as a .request not a .post
Where does the code above reside? Is it in a service?
const headers: any = {'Content-Type': 'application/json'};
return this.ajax.request<any>({
url: url,
method: method (POST),
headers: headers,
options: {
body: JSON.stringify(req.body)
}
});
}
You are using it here but as a .request not a .post
return this.http.request<T>(req.method, req.url, req.options)
Where does the code above reside? Is it in a service?
ASKER
We tried with Fiddler. The service is not receiving the content-type: application/json header when testing from the front-end dev machine. But Content-type is there when we debug in chrome browser of front end machine.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The headers are working now, we are using http.post().