React axios post request to wcf web service - reactjs

Question

I am trying to post data from a react application to a wcf service class. Its a simple object with just name age and gender. The service is being called from the react app but with no data. If I use get request and parameter passing the data is passing to the service but I want to use post request. Is it necessary to match the field names as in the wcf service class.
For testing purpose in react component I am using this code
const headers = {
'content-type': 'application/json'
}
const puser = {
Name:'Test',
Age:'23',
Gender:'F',
}
axios.post('http://localhost:3292/myService.svc/adduser',{headers:headers}, puser)
.then(res=> {
console.log(res.data)
})
in wcf service the class code is
public class UserClass
{
string name;
int age;
string gender;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
public int Age
{
get
{
return age;
}
set
{
age = value;
}
}
public string Gender
{
get
{
return gender;
}
set
{
gender = value;
}
}
}
and in service call
public string AddUser(List<User> U)
{
UserClass usr = new UserClass();
return "success";
}

Answer 1

Axios post method expects data as second argument. Try to swap puser with {headers}.
https://github.com/axios/axios#axiosposturl-data-config

Answer 2

Do not add header in axios.post, code should look like this:
const puser = {
Name:'Test',
Age:'23',
Gender:'F',
}
axios.post('http://localhost:8000/AddUser', puser)
.then(res=> {
console.log(res.data)
})
Feel free to let me know if the problem persists.
UPDATE:
Set header in Postman:
Axios.post can also set the header like the following:
axios.post('http://localhost:8000/AddUser',{ Name:'Test',
Age:'2311',
Gender:'FF'}, {headers: {
'content-type': 'application/json'
}})
.then(res=> {
console.log(res.data)
})
Here is my project:
Program.cs:
using Demo_rest_ConsoleApp;
using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Description;
using System.ServiceModel.Web;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApp71
{
public class User
{
string name;
int age;
string gender;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
public int Age
{
get
{
return age;
}
set
{
age = value;
}
}
public string Gender
{
get
{
return gender;
}
set
{
gender = value;
}
}
}
[ServiceContract]
[CustContractBehavior]
public interface IService
{
[OperationContract]
[WebGet]
string EchoWithGet(string s);
[OperationContract]
[WebInvoke]
string EchoWithPost(string s);
[OperationContract]
[WebInvoke(ResponseFormat =WebMessageFormat.Json,RequestFormat =WebMessageFormat.Json)]
string AddUser(User U);
}
public class Service : IService
{
public string AddUser(User U)
{
Console.WriteLine(U.Age);
Console.WriteLine(U.Gender);
Console.WriteLine(U.Name);
return "success";
}
public string EchoWithGet(string s)
{
return "You said " + s;
}
public string EchoWithPost(string s)
{
return "You said " + s;
}
}
class Program
{
static void Main(string[] args)
{
WebServiceHost host = new WebServiceHost(typeof(Service), new Uri("http://localhost:8000/"));
ServiceEndpoint ep = host.AddServiceEndpoint(typeof(IService), new WebHttpBinding(), "");
ep.EndpointBehaviors.Add(new WebHttpBehavior() { HelpEnabled=true});
host.Open();
Console.WriteLine("Open");
Console.ReadLine();
}
}
}
Soap.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Channels;
using System.ServiceModel.Configuration;
using System.ServiceModel.Description;
using System.ServiceModel.Dispatcher;
using System.ServiceModel.Web;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Xml;
namespace Demo_rest_ConsoleApp
{
public class ServerMessageLogger : IDispatchMessageInspector
{
public object AfterReceiveRequest(ref Message request, IClientChannel channel, InstanceContext instanceContext)
{
Console.WriteLine(request);
return null;
}
public void BeforeSendReply(ref Message reply, object correlationState)
{
WebOperationContext ctx = WebOperationContext.Current;
ctx.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*");
ctx.OutgoingResponse.StatusCode = System.Net.HttpStatusCode.OK;
if (ctx.IncomingRequest.Method == "OPTIONS")
{
ctx.OutgoingResponse.StatusCode = System.Net.HttpStatusCode.OK;
ctx.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,POST,DELETE,OPTIONS");
ctx.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
}
}
}
public class ClientMessageLogger : IClientMessageInspector
{
public void AfterReceiveReply(ref Message reply, object correlationState)
{
}
public object BeforeSendRequest(ref Message request, IClientChannel channel)
{
return null;
}
}
[AttributeUsage(AttributeTargets.Interface | AttributeTargets.Class, AllowMultiple = false)]
public class CustContractBehaviorAttribute : Attribute, IContractBehavior, IContractBehaviorAttribute
{
public Type TargetContract => throw new NotImplementedException();
public void AddBindingParameters(ContractDescription contractDescription, ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)
{
return;
}
public void ApplyClientBehavior(ContractDescription contractDescription, ServiceEndpoint endpoint, ClientRuntime clientRuntime)
{
clientRuntime.ClientMessageInspectors.Add(new ClientMessageLogger());
}
public void ApplyDispatchBehavior(ContractDescription contractDescription, ServiceEndpoint endpoint, DispatchRuntime dispatchRuntime)
{
dispatchRuntime.MessageInspectors.Add(new ServerMessageLogger());
}
public void Validate(ContractDescription contractDescription, ServiceEndpoint endpoint)
{
return;
}
}
}