为什么我不能使用普通 JavaScript fetch() API 对本地 json 文件使用 POST 方法？

Question

I can use the fetch API to do a HTTP POST request to an external JSON file, but it can't be done in the local JSON file.

    class EasyHttp {
  // http GET request
  get(url) {
    return new Promise((resolve, reject) => {
      fetch(url)
        .then((res) => resolve(res))
        .catch((err) => reject(err));
    });
  }

  // http POST request
  post(url, data) {
    return new Promise((resolve, reject) => {
      fetch(url, {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((res) => resolve(res))
        .catch((err) => reject(err));
    });
  }
}

const http = new EasyHttp();

const newData = {
  customerID: 1252123,
  name: "Aditya Padukhan",
  purchase: "Realme alubhaja pro",
  productID: "158-hb-122",
};

http
  .post("customers.json", newData)
  .then((res) => res.json().then((data) => console.log(data)))
  .catch((err) => console.log(err));

And I got an error:

eassyhttp.js:16 POST http://127.0.0.1:5500/customers.json 405 (Method Not Allowed) (anonymous) @ eassyhttp.js:16 post @ eassyhttp.js:15 (anonymous) @ app.js:16 app.js:18

SyntaxError: Unexpected end of JSON input at app.js:17

Answer 1

The specification says :

The POST method requests that the target resource process the representation enclosed in the request according to the resource's own specific semantics.

A static file has no means of processing the data that is posted. JSON isn't a programming language. There is nothing that can read the POST request and do anything with the data in it. Consequently, your web server is defaulting to saying "No, you can't POST here".

If you want to do something with the POST request, then you need to write some server side code that will do that something. (If you want to just overwrite the existing JSON then you should probably be using PUT instead of POST too). Note that allowing any HTTP request to change the data on the server is a bad idea and you really shouldn't allow it without some kind of authentication that limits requests to trusted people and/or logic to determine if the incoming data is "good".