'POST request works on LOCAL machine but NOT on real SERVER

I want to make changes (create an entry) in a JSON file via a POST request using JavaScript AXIOS tools. Everything works fine on my LOCAL machine by running an extra json-server: npx json-server --watch data/db.json

BUT when I deploy the project on server it doesn't work.

I have redirected the URLs (to relative paths), and changed the permissions on SERVER (7,7,7). No use! And the worst thing - I get no ERRORs:

  • response.ok == ok,
  • response.status = 200 //on Local server it's 201 Created

Furthermore, the POST request the POST request returns the content of the res.data back Object(locations: Array(1)) - which means it can find the data (path is correct).

I've tried many functions to make the POST request but my initial intention was to use the AXIOS. This is the code I use for POST req.:

try {
  const res = await axios({
    method: 'post',
    url: '/data/db.json',
    data: {
      country: "USA",
      city: "New-York",
      date: "09.03.2022",
      time: "09:45:00"
    }
  })
  console.log("Axios Promise Response Data:")
  console.log(res.data)
  
} catch(err) {
  console.error(err)
}

JSON file structure and Content:

{
  "locations": [
    {
      "id": 0,
      "country": "USA",
      "city": "New-York",
      "date": "05.03.2022",
      "time": "08:00:00"
    }
  ]
}

As I said, a simple XMLHttpRequest() as well doesn't work as well (testing separately):

var xhr = new XMLHttpRequest();
xhr.open("POST", '/data/db.json');

xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
      console.log(xhr.status);
      console.log(xhr.responseText);
  }};

var data = `{
      country: "USA",
      city: "New-York",
      date: "09.03.2022",
      time: "09:45:00"
}`;

xhr.send(data);

Any help is appreciated 🤝



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source