javascript - post 方法的问题(使用 fetch 和 express)
问题描述
我是一个非常初学者,所以我希望我的问题不是那么愚蠢。我想要做的是将经度和纬度从客户端 javascript 传递到服务器端的 node.js 中。我正在使用 fetch 和 express.js。
在我的html代码下面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
latitude: <span id="latitude"></span>°<br />
longitude: <span id="longitude"></span>°<br />
</p>
<button id="geolocate">geolocate</button>
<script src="main.js"></script>
</body>
</html>
这是我的 main.js 中的一个小示例:
document.getElementById('geolocate').addEventListener('click', event => {
if ('geolocation' in navigator) {
console.log('geolocation available');
navigator.geolocation.getCurrentPosition(position => {
var X = position.coords.latitude;
var Y = position.coords.longitude;
console.log(X, Y);
document.getElementById('latitude').textContent = X;
document.getElementById('longitude').textContent = Y;
const data = {X, Y}
const options = {
method: 'POST',
body: JSON.stringify(data),
headers: {
'content-type': 'application/json'
}
}
fetch('/api', options);
});
} else {
console.log('geolocation not available');
}
});
在这里你可以看到我的 node.js 代码:
const express = require('express');
const app = express();
app.listen(3000, () => console.log('listening at 3000'));
app.post('/api', (req, res) => {
console.log(req);
});
当我运行它时,我收到一个 404 错误。我不知道我在这里做错了什么。我将不胜感激任何建议。
编辑:
这个应用程序正在我的 VPS 上运行。我还有一个带有 SSL 别名的域。为了运行 node.js,我使用 nodemon 作为进程。以下是日志:
user_name_with_sudo 11451 0.5 3.6 663672 38152 pts/0 Sl+ 11:05 0:00 node /bin/nodemon index.js $
如您所见,这是一个过程。
httpd service status - Oct 20 17:14:21 www.{my domain}.pl systemd[1]: Started The Apache HTTP Server.
如您所见,我正在使用centOS7
解决方案
尝试为获取添加完整路径。您正在 localhost 的端口 3000 上侦听服务器
主.js:
document.getElementById('geolocate').addEventListener('click', event => {
if ('geolocation' in navigator) {
console.log('geolocation available');
navigator.geolocation.getCurrentPosition(position => {
var X = position.coords.latitude;
var Y = position.coords.longitude;
console.log(X, Y);
document.getElementById('latitude').textContent = X;
document.getElementById('longitude').textContent = Y;
const data = {X, Y}
const options = {
method: 'POST',
body: JSON.stringify(data),
headers: {
'content-type': 'application/json'
}
}
fetch('http://localhost:3000/api', options)
.then(response => response.json())
.then(data => {
// if everting is ok should log the object message: "Long lang sent to express" from server
console.log(data)
});
});
...
服务器端就像 dat
const express = require('express');
const app = express();
app.listen(3000, () => console.log('listening at 3000'));
app.post('/api', (req, res) => {
try {
const {X, Y} = req.body
console.log(X, Y)
res.status(200).json({ message: "Long lang sent to express" })
} catch (e) {
res.status(500).json({ message: 'Something go wrong, try again' })
}
});
尝试使用小写变量(例如:不使用 X, Y.. 但使用 x, y)如果它不是常量 :) Gl 与编程
推荐阅读
- python - Py2Neo V4 - 即使是字符串值也能起作用
- android - 如何使用 Firebase Cloud 消息发送群组通知?
- javascript - 从缩小的脚本中分离一个 javascript 文件的最佳方法是什么?
- ios - 访问物理设备上的文档目录
- reactjs - 使用 REACT.js 的 SPA 导航栏
- android - 将我的 EditText 输入转换为可观察的流
- sql - 计算变量属性的问题
- java - RequestFocus 和 ReqeustFocusFromTouch 的区别?
- android - 如何从 admob 添加 NATIVE 广告?
- push-notification - 使用 PHP 发送推送通知