localhost使用http-server上传文本文件返回405 Method Not Allowed错误如何解决

NPM 官方的http-server包是静态资源托管工具，默认仅支持 GET/HEAD 这类读取类请求，没有内置 POST 请求处理、文件接收写入本地目录的逻辑，你直接发送 POST 上传请求自然会被拦截，返回405方法不允许的报错。

无需复杂框架，只需用极简 Node 自定义服务替代http-server，同时保留静态资源托管能力、新增文件上传支持即可： #

第一步：安装依赖 #

只需要两个轻量包分别处理服务请求和表单上传：

npm install express multer

第二步：编写自定义服务代码 #

在项目根目录新建server.js文件，内容如下：

const express = require('express');
const multer = require('multer');
const app = express();
const port = 8002;

// 配置文件存储规则：自动写入对应目录、保留原文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 路径和你上传时的folder_name参数对应，比如data就存入./data目录
    cb(null, './' + req.params.folder);
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
})
const upload = multer({ storage: storage });

// 静态资源托管，和原http-server功能完全一致，可正常访问html、js等静态文件
app.use(express.static('./'));

// 处理上传的POST接口
app.post('/:folder/', upload.single('file'), function (req, res) {
  res.send('上传完成');
})

app.listen(port, () => {
  console.log(`服务已启动，地址：http://localhost:${port}`)
})

• 注意：提前在项目根目录新建你要存储文件的文件夹，比如要上传到data目录，就先创建./data文件夹，避免路径不存在报错。

第三步：修改前端上传代码 #

原代码有两个小问题，手动设置multipart/form-data会丢失边界标识参数，append参数需要和后端配置对应：

function upload_file(folder_name, file_name, file_contents) {
  var req = new XMLHttpRequest();

  req.addEventListener("load", callback);
  req.open("POST", "http://localhost:8002/" + folder_name + "/");
  // 删掉手动设置Content-Type的代码，浏览器会自动生成带boundary的正确请求头

  var formData = new FormData();
  // 第一个参数和后端upload.single的参数对应，第二个传入文本Blob对象，第三个为文件名
  formData.append("file", new Blob([file_contents], { type: 'text/plain' }), file_name + ".txt");

  req.send(formData);

  function callback() {
      console.log("Success");
  }
}

upload_file("data", "data.txt", "[1, 2, 3]");

第四步：启动服务 #

关掉原来的http-server进程，运行自定义服务即可：

node server.js

此时再次触发上传，文本文件就会自动写入到对应目录下。

内容的提问来源于stack exchange，提问作者Kyle