使用fetch() POST向本地http-server提交表单遇405错误求助

嘿，别慌！作为新手遇到这种问题太正常了，我来一步步帮你理清脉络：

为什么会出现405错误？ #

首先要明确：你用的http-server是静态文件服务器，它的核心功能就是返回现成的静态文件（比如你的HTML、JS、users.json），只支持GET这类读取文件的请求，完全不处理POST/PUT/DELETE这类需要修改数据的请求。这就是你收到405 (Method Not Allowed)的根本原因——不是CORS的问题，也不是本地服务器的锅，是静态服务器本身的局限性。

解答你的几个困惑： #

• 这和CORS有关吗？：无关。CORS错误的提示会是类似No 'Access-Control-Allow-Origin' header is present on the requested resource，你加的--cors已经帮你处理了跨域的基础设置，当前的405是方法不被支持，和跨域无关。另外提一句：你前端请求里加的Access-Control-Allow-Origin头是没用的，这个是服务端返回给浏览器的响应头，前端请求不需要带它。
• 需要写Node.js服务端脚本吗？：是的！要处理POST请求并修改JSON文件，你需要一个能处理动态请求的服务器，静态服务器做不到这一点。不过放心，写一个简单的Node服务很容易。
• 是因为仅使用本地服务器导致的吗？：不是。不管是本地还是线上的静态服务器，都只负责返回静态文件内容，不支持修改文件的POST请求。

具体解决方案：用Express搭建简单Node服务 #

下面是一步步的操作，完全适合新手入门：

1. 准备工作 #

首先停止正在运行的http-server，然后在你的项目目录下打开终端：

• 初始化Node项目：npm init -y（会自动生成package.json文件）
• 安装需要的依赖包：npm install express cors

2. 创建服务端脚本 #

在项目目录下新建server.js文件，写入以下代码：

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000;

// 启用CORS支持
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

// 提供静态文件服务（你的HTML、JS等文件）
app.use(express.static(path.join(__dirname, '.')));

// 处理GET请求，返回users.json中的数据
app.get('/users', (req, res) => {
  fs.readFile('users.json', 'utf8', (err, data) => {
    if (err) {
      return res.status(500).json({ error: 'Failed to read users data' });
    }
    res.json(JSON.parse(data));
  });
});

// 处理POST请求，把新用户添加到users.json中
app.post('/users', (req, res) => {
  const newUser = req.body;
  // 读取现有用户数据
  fs.readFile('users.json', 'utf8', (err, data) => {
    if (err) {
      return res.status(500).json({ error: 'Failed to read users data' });
    }
    const users = JSON.parse(data);
    // 添加新用户到数组
    users.push(newUser);
    // 将更新后的数据写入回文件
    fs.writeFile('users.json', JSON.stringify(users, null, 2), (err) => {
      if (err) {
        return res.status(500).json({ error: 'Failed to save user' });
      }
      res.json(newUser);
    });
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

3. 修改前端代码 #

把你HTML里的getUsers和addPost函数修改一下，请求地址改成我们Node服务的接口：

function getUsers() {
  fetch('/users') // 改成服务端的GET接口
    .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>
        `;
      });
      document.getElementById("output").innerHTML = output;
    })
}

function addPost(e) {
  e.preventDefault();
  let id = document.getElementById('id').value;
  let name = document.getElementById('name').value;
  let email = document.getElementById('email').value;

  fetch('/users', { // 改成服务端的POST接口
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({ id: id, name: name, email: email })
  })
  .then((res) => res.json())
  .then((data) => {
    console.log('User added successfully:', data);
    // 添加成功后重新获取用户列表，更新页面
    getUsers();
    // 清空表单内容
    document.getElementById('addPost').reset();
  })
  .catch(err => console.error('Error adding user:', err))
}

4. 运行服务 #

在终端里输入：node server.js，然后在浏览器里访问http://localhost:3000，现在点击提交按钮应该就能正常添加用户了！

补充说明 #

• 这个简单的服务只是用于学习，生产环境中我们会用数据库（比如MongoDB、MySQL）来存储数据，而不是直接操作JSON文件，不过对于新手入门来说，用JSON文件已经足够理解请求处理的流程了。
• 如果之后遇到其他问题，比如文件读写权限、数据格式错误，随时检查终端里的服务日志，它会给出明确的错误提示。

内容的提问来源于stack exchange，提问作者René K