Link to home
Start Free TrialLog in
Avatar of Member_2_8194302
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:
    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);
        });
    }

Open in new window


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;
    }

Open in new window


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>

Open in new window


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.
Avatar of ste5an
ste5an
Flag of Germany image

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
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)
        }
        });
    }

Open in new window


You are using it here but as a .request not a .post
return this.http.request<T>(req.method, req.url, req.options)

Open in new window


Where does the code above reside? Is it in a service?
Avatar of Member_2_8194302
Member_2_8194302

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The headers are working now, we are using http.post().