Question

我想通过fetch POST将填写好的JSON格式表单发送到本地服务器，该服务器已设置为“npm http-server”。服务器已使用命令“http-server --cors”启动。单击提交按钮时出现错误消息：“ 405（Method Not Allowed）”。我在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"
  }
]

用于显示JSON并上传新条目的HTML文件：

<!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文件，该文件将扮演您的“数据库”的角色。在您的情况下，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方法处理程序。然后，您将能够从“数据库”获取/插入/更改/删除记录。在您的情况下，fetch调用端点URL必须更改为：fetch('localhost:3000/users', ...)。

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

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

1 个答案: