为啥我使用 go live 时我的代码不起作用？
Posted
技术标签:
【中文标题】为啥我使用 go live 时我的代码不起作用？【英文标题】：Why my code doesn't work when I use go live?为什么我使用 go live 时我的代码不起作用？ 【发布时间】：2021-09-08 03:38:33 【问题描述】：signupForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
</head>
<body>
<form action="" class="form" method="post">
<label for="username">Username</label>
<input type="text" name="username" id="username"><br><br>
<label for="email">E-mail</label>
<input type="text" name="email" id="email"><br><br>
<label for="password">Password</label>
<input type="text" name="password" id="password"><br><br>
<button class="signup">Sign Up</button>
</form>
</body>
</html>
signupForm.js
const express=require("express")
const mongoose=require('mongoose')
const bodyParser=require("body-parser")
const app=express()
app.use(bodyParser.urlencoded(extended:true))
mongoose.connect("mongodb://localhost/SignUpData",useNewUrlParser:true,useUnifiedTopology:true)
const signupSchema=
username:String,
email:String,
password:String,
const SignupInfo=mongoose.model("SignupInfo",signupSchema)
app.get('/signupForm.html',(req,res)=>
res.sendFile(__dirname+'/signupForm.html')
)
app.post('/signupForm.html',(req,res)=>
let signup=new SignupInfo(
username:req.body.username,
email:req.body.email,
password:req.body.password,
)
signup.save();
res.redirect('/signupForm.html')
)
app.listen(5500,()=>
console.log("Server on 5500")
)
这很好用，如果我在浏览器中输入 localhost:5500/signupForm.html 并提供数据，数据就会存储在 mongodb 中。
但是如果我通过了
登录.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Signup</title>
</head>
<body>
<div class="loginBody">
<div class="login_heading">
All-In Education
</div>
<div class="login">
<div class="login1">
<a href="loginForm.html">Login</a>
</div>
<div class="login2">
<a href="loginForm.html">Click if account exists</a>
</div>
</div>
<div class="signup">
<div class="signup1">
<a href="signupForm.html">Signup</a>
</div>
<div class="signup2">
<a href="signupForm.html">Click for new account</a>
</div>
</div>
</div>
</body>
</html>
如果我在带有 login.html 文件的 Visual Studio 代码中单击使用 go-live（它是 Ritwick Dey 在 Visual Studio Code 中的实时服务器扩展），然后单击注册链接，页面重定向到 signupForm.html，但是当我尝试提供数据并单击注册按钮时，它说 “此页面无法正常工作 如果问题仍然存在，请联系网站所有者。
HTTP ERROR 405 "，带有 URL "http://127.0.0.1:5500/signupForm.html"。
【问题讨论】：
什么是“上线”？它是一个内置的网络服务器吗？您的 Node.js 应用程序服务器可能没有运行。signupForm.js 中没有login.html 的路由，所以看起来它是不同的服务器。
错误 405 - 服务器拒绝了它正在使用的特定 HTTP 方法 - 这个“上线”是否处理 POST 请求？
它是 Ritwick Dey 在 Visual Studio Code 中的实时服务器扩展
Visual Studio 和 Visual Studio Code 是两个完全不同的应用程序。
github.com/ritwickdey/vscode-live-server/issues/541 github.com/ritwickdey/vscode-live-server/issues/66 github.com/ritwickdey/vscode-live-server/issues/54 等
【参考方案1】：
"go-live" 启动一个单独的网络服务器，而不是您的应用程序服务器。解决问题的一种方法是向应用服务器添加路由
const express=require("express")
const mongoose=require('mongoose')
const bodyParser=require("body-parser")
const app=express()
app.use(bodyParser.urlencoded(extended:true))
mongoose.connect("mongodb://localhost/SignUpData",useNewUrlParser:true,useUnifiedTopology:true)
const signupSchema=
username:String,
email:String,
password:String,
const SignupInfo=mongoose.model("SignupInfo",signupSchema)
app.get('/signupForm.html',(req,res)=>
res.sendFile(__dirname+'/signupForm.html')
)
app.post('/signupForm.html',(req,res)=>
let signup=new SignupInfo(
username:req.body.username,
email:req.body.email,
password:req.body.password,
)
signup.save();
res.redirect('/signupForm.html')
)
app.get('/login.html',(req,res)=>
res.sendFile(__dirname+'/login.html')
)
app.listen(5500,()=>
console.log("Server on 5500")
)
并使用node signupForm.js 启动应用程序服务器。
解决问题的其他方法是
使用网络服务器并将其配置为处理 POST 请求或 为login.html 启动一个网络服务器并在不同的端口上启动您的应用程序服务器并配置CORS 标头或
为login.html 启动一个网络服务器并在不同的端口上启动您的应用程序服务器并使用反向代理
【讨论】：
以上是关于为啥我使用 go live 时我的代码不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的密码不起作用？ Eclipse 和 Github [重复]