我做了一个真实的时间聊天应用程序。MySQL数据库使用。
代码在我的本地系统工作完美，即获取方法通过http://localhost:3000/。
在netlify中部署时，它无法在中工作。
我想这似乎是内部路由问题。
不幸的是，我不是netlify的付费会员，所以无法在netlify中找到我的应用程序日志。
有没有办法解决这个问题。
虽然主页index.html，这是显示与netlify网站链接，不幸的是问题是与获取和发布方法。
请在下面找到我的两个文件（index.html和server.js）。
沿着而来的是用于数据库的connection.js（不包括）
我在我的代码中修改了这一行（本地系统到实时服务器）：
本地服务器
$.get('http://localhost:3000/messages', (data) => {与此
直播服务器
$.get('https://repoName.netlify.app/messages', (data) => {感谢你给我一个机会来解决这个问题！
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="jumbotron">
<h1 class="display-4">Send Message</h1>
<br>
<input id="name" class="form-control" placeholder="Name">
<br>
<textarea id="message" class="form-control" placeholder="Your Message Here"></textarea>
<br>
<button id="send" class="btn btn-success">Send</button>
</div>
<div id="messages">
</div>
</div>
<script>
$(() => {
$("#send").click(() => {
sendMessage({
name: $("#name").val(),
message: $("#message").val()
});
})
getMessages()
})
function addMessages(message) {
$("#messages").append(`
<h4>${message.name} : </h4>
<p>${message.message}</p>`)
}
function getMessages() {
$.get('http://localhost:3000/messages', (data) => {
data.forEach(addMessages);
})
}
function sendMessage(message) {
$.post('http://localhost:3000/messages', message)
getMessages()
}
</script>
</body>
</html>server.js
var express = require('express')
var app = express()
var db = require('./connection')
var bodyParser = require('body-parser')
var cors = require('cors')
app.use(express.static(__dirname))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors())
// mysql
function selectUser() {
return new Promise((resolve, reject) => {
let sql = `Select * from user`
db.query(sql, (err, result) => {
if (err) throw err
resolve(result)
})
})
}
let insertUser = (name, msg) => {
return new Promise((resolve, reject) => {
let sql = `INSERT INTO user (name, message) VALUES ('${name}','${msg}')`
db.query(sql, (err, result) => {
if (err) { reject(err) }
resolve(result)
})
})
}
// routes
app.get('/messages', async (req, res) => {
console.log(req.body);
let data
await selectUser().then((response) => {
JSON.stringify(response)
data = response
})
res.send(data)
})
app.post('/messages', async (req, res) => {
console.log(req.body);
await insertUser(req.body.name, req.body.message).then(() => {
}).catch(() => {
res.sendStatus(500)
})
res.sendStatus(200)
})
// port
var server = app.listen(3000, () => {
console.log('Server is running on port', server.address().port);
})
1条答案
按热度按时间8nuwlpux1#
在Netlify上部署实时聊天应用程序时遇到的问题可能是由于您使用本地开发URL
(http://localhost:3000/messages)向服务器发出AJAX请求。将应用程序部署到Netlify时，应使用服务器的相对URL或正确的产品URL。以下是如何修改代码，使其既能在本机工作，又能在部署到Netlify时工作：
更新index.html中的JavaScript代码，以便对AJAX请求使用相对URL。更改此行：
使用：
类似地，用同样的方式更新你的$.post请求：
此更改允许您的应用程序向其托管的同一域发出请求，无论是在本地服务器上还是在Netlify上。
确保您的服务器配置为在部署到Netlify时侦听正确的端口。在server.js中，您当前使用的是3000端口：
在Netlify这样的生产环境中，使用端口3000是不可行的。Netlify动态分配端口，您应该依靠process.env.PORT变量来确定正确的端口：
通过执行此调整，您的服务器将侦听Netlify分配的端口。
在这些更新之后，您的应用程序应该可以在本地开发和部署在Netlify上时无缝运行，从而消除任何路由问题。在部署到生产环境时，请确保调整服务器配置。