个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 17:40:00 30 4
gpt4 key购买 nike

我想通过 fetch 发送 JSON 格式的填写表格POST 到已使用“npm http-server”设置的本地服务器。服务器已使用命令“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"
  }
]

用于显示 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>

最佳答案

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

但是，您很幸运，因为有一个类似的包，它允许您使用单个命令运行 RESTful API。它的名字叫json-server 。您只需要提供一个 JSON 文件，它将充当您的“数据库”的 Angular 色。在您的情况下，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来全局安装该软件包。

关于javascript - 使用 fetch() POST 将表单发送到本地服务器失败。错误405，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48136069/

30 4 0
文章推荐： php - 带有字符的子页面/
文章推荐： javascript - 未选择日期选择器时隐藏两个特定的 div
文章推荐： python - 几个项目的 celery 花
文章推荐： html - 使用 HTML 对齐和对齐文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com