使用 fetch() POST 将表单发送到本地服务器失败。错误 405
Posted
技术标签:
【中文标题】使用 fetch() POST 将表单发送到本地服务器失败。错误 405【英文标题】：Send form to local server with fetch() POST failed. Error 405 【发布时间】：2018-06-16 14:12:40 【问题描述】：我想通过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>【问题讨论】：
您当前在服务器端的 CORS 设置是什么？ 你的api和ui server url不一样吗？ @Kushal html 和 JSON 都在 localhost:8080 上，所以我想 API 和 ui 服务器是相似的。 您能否将其中一个 api 响应标头粘贴到此处？ @DevangNaghera 我在服务器端没有脚本。所以真的不知道如何检查。本地服务器以 http-server --cors 启动。此“--cors”表示“通过 Access-Control-Allow-Origin 标头启用 CORS”。这就是我所知道的。 【参考方案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的主要内容，如果未能解决你的问题，请参考以下文章
Angular $http POST 从 ExpressJS 获取 null