使用 fetch() POST 将表单发送到本地服务器失败。错误 405

Question

我想通过 fetch POST to a local server, which has been set up with "npm http-server”发送 JSON 格式的已填写表格。服务器已使用命令 "http-server --cors" 启动。单击提交时出现错误消息按钮是：“405（不允许的方法）”。我在 Chrome 和 Edge 中尝试过。

我现在有点不知所措。它与 CORS 安全设置有关吗？我是否需要服务器端 node.js 脚本来允许此调用？是因为我只使用本地服务器吗？我迷路了...

非常感谢任何帮助！对这一切都很陌生，但我渴望学习。

下面是 JSON 和 JavaScript 代码。两者都在本地服务器的同一个主目录中：

JSON:

    [
  {
    "id":1,
    "name":"Rick",
    "email":"rick@gmail.com"
  },
  {
    "id":2,
    "name":"Glenn",
    "email":"glenn@gmail.com"
  },
  {
    "id":3,
    "name":"Negan",
    "email":"negan@gmail.com"
  }
]

HTML 文件以显示 JSON 并上传新条目：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fetch API Sandbox</title>
</head>

<body>
  <h1>Fetch API Sandbox</h1>
  <button id="getUsers">Get JSON</button>

  <div id="output"></div>
  <!--Hier wird das JSON reingeschrieben-->

  <form id="addPost">
    <div> <input type="text" id="id" placeholder="ID"> </div>
    <div> <input type="text" id="name" placeholder="Name"> </div>
    <div> <input type="text" id="email" placeholder="E-Mail"> </div>
    <input type="submit" value="Submit">
  </form>

  <script>
    document.getElementById('getUsers').addEventListener('click', getUsers);
    document.getElementById('addPost').addEventListener('submit', addPost);

    function getUsers() {
      fetch('users.json')
        .then(function(response) {
          if (response.ok)
            return response.json();
          else
            throw new Error("Names could not be loaded!")
        })
        .then(function(json) {
          console.log(json);
          let output = '<h2>Users</h2>';
          json.forEach(function(user) {
            output += `
    <ul>
      <li>ID: ${user.id}</li>
      <li>Name: ${user.name}</li>
      <li>Email: ${user.email}</li>
    </ul>
     `;
            console.log(output);
            document.getElementById("output").innerHTML = output;
          });
        })
    }

    function addPost(e) {
      e.preventDefault();

      let id = document.getElementById('id').value;
      //console.log(id);
      let name = document.getElementById('name').value;
      let email = document.getElementById('email').value;

      fetch('users.json', {
          method: 'POST',
          mode: 'cors',
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-type': 'application/json',
            'Access-Control-Allow-Origin': '*'
          },
          body: JSON.stringify({
            id: id,
            name: name,
            email: email
          })
        })
        .then((res) => res.json())
        .then((data) => console.log(data))
    }
  </script>

</body>

</html>

Answer 1

http-server 是静态文件服务器。它只会处理 GET 个请求。

不过，你很幸运，因为有一个类似的包，它允许你用一个命令运行 RESTful API。它被称为json-server。您只需要提供一个 JSON 文件，它将代替您的 "database"。在您的情况下，JSON 可能如下所示：

{
  "users": [
    {
      "id": 1,
      "name": "Rick",
      "email": "rick@gmail.com"
    },
    {
      "id": 2,
      "name": "Glenn",
      "email": "glenn@gmail.com"
    },
    {
      "id": 3,
      "name": "Negan",
      "email": "negan@gmail.com"
    }
  ]
}

当您运行具有 json-server db.json 的服务器时，这将为端点 /users 创建 GET/POST/PATCH/DELETE 方法处理程序。然后，您将能够 get/insert/alter/delete 来自 "database" 的记录。在您的情况下，fetch 调用端点 URL 必须更改为：fetch('localhost:3000/users', ...).

您可以通过运行ning npm install -g json-server 全局安装包。

使用 fetch() POST 将表单发送到本地服务器失败。错误 405

Send form to local server with fetch() POST failed. Error 405

javascript

json

http-status-code-405

fetch-api