为什么使用VS Code Go Live扩展提交注册表单时报HTTP 405错误

问题原因 #

• 你自行编写的Express后端服务监听5500端口，同时支持GET、POST两种请求处理/signupForm.html路径，因此直接访问服务提交表单可以正常写入数据库。
• VS Code的Go Live（live-server扩展）是纯静态文件服务器，默认也占用5500端口，仅支持GET请求拉取静态资源，不支持处理POST请求。你启动Go Live后，实际访问的是静态服务器，提交表单时发的POST请求没有对应处理逻辑，就会返回HTTP ERROR 405 Method Not Allowed错误。
• 额外注意：如果两个服务同时启动，先运行的Go Live会占用5500端口，你的Express服务会因为端口冲突启动失败，全程请求都会走静态服务器。

解决方案 #

方案1：仅使用自行编写的Express服务（推荐） #

1. 先关闭VS Code右下角正在运行的Go Live服务
2. 在signupForm.js中添加login.html的路由，否则Express无法返回登录页：

// 加在signupForm.html的GET路由前后即可
app.get('/login.html',(req,res)=>{
    res.sendFile(__dirname+'/login.html')
})

3. 终端运行node signupForm.js启动Express服务，直接在浏览器访问http://localhost:5500/login.html使用即可，所有页面跳转、表单提交请求都会被正常处理。

方案2：保留Go Live做热更新开发 #

如果需要用Go Live的热重载能力调试前端页面，可以端口区分两个服务：

1. 修改Express的监听端口，避免和Go Live冲突，把signupForm.js的监听代码改成：

// 改成其他未被占用的端口即可，比如3000
app.listen(3000,()=>{
    console.log("Server on 3000")
})

2. 安装cors中间件解决跨域问题：终端运行npm install cors，在signupForm.js中添加配置：

const cors = require('cors')
// 写在app.use(bodyParser...)的前后即可
app.use(cors())

3. 修改signupForm.html的表单提交地址，指向Express服务：

<form action="http://localhost:3000/signupForm.html" class="form" method="post">

4. 同时启动Go Live和Express服务即可正常开发使用。

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