AXIOS Request does not send data to PHP server

Question

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

print_r(file_get_contents('php://input'));

This is my PHP server page to handle a request from a react.js client on localhost:3000

this is the code of the client

let handleSubmitDesign = (event) => {
event.preventDefault();
let url = 'https://www.myserver.com/test.php'; //Server example
let data = {
  key: k,
  code: code,
  role: role,
  cat: 1
};
sendPostRequest(data, url, fun);

}

This is the first function

function sendPostRequest(data, url, fun) {
let newData = JSON.stringify(data);
axios.post(url, newData)
.then(function (response) {
  //console.log(response.data);
  fun(response.data);
})
.catch(function (error) {
  console.log(error);
});

}

Of course the data are not empty and i can check using a log , if a use a third party API tool test as https://reqbin.com/ i can check my server page works fine , same thing with a React Native mobile app, but not for this React.js app

the print_r funcion , or an echo function let me see i don't recive anything

Answer 1

Try to pass also headers.

function sendPostRequest(data, url, fun) {
let newData = JSON.stringify(data);

const headers = {
  "Content-Type": "application/json",
  //Authorization: token, Bearer token or whatever applies
}

axios.post(url, newData, { headers:headers })
.then(function (response) {
  //console.log(response.data);
  fun(response.data);
})
.catch(function (error) {
  console.log(error);
});