post方法的问题(使用fetch和express)

2024-04-15

我是一个非常初学者,所以我希望我的问题不是那么愚蠢。 我想要做的是将经度和纬度从客户端 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>&deg;<br />
      longitude: <span id="longitude"></span>&deg;<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 错误。我不知道我在这里做错了什么。我将不胜感激任何建议。

EDIT:

这个应用程序正在我的 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 上侦听服务器

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('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)
        });
  });
...

服务器端将像数据一样

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 编程

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

post方法的问题(使用fetch和express) 的相关文章

  • 如何取消 boost asio io_service 帖子

    如何取消已发布的回调 getIoService gt post boost bind MyClass myCallback this 并保持其他发布的回调不变 问题是我有一些对象从不同线程接收事件 并将它们发布到 ioservice 以便处
  • JS Facebook登录iOS8

    我的 facebook 应用程序上的登录按钮在 iOS 8 中完全停止工作 我以为这是我所做的事情 但是当我从他们的网站获取 facebook 示例 html 并将其应用到我的页面时 它仍然不起作用 我的应用程序 ID 已被替换 与 xxx
  • Python请求响应以utf-8编码但无法解码

    我正在尝试使用 python 抓取我的messenger com facebook Messenger 聊天记录 并且我使用谷歌浏览器开发工具来查看聊天历史记录的 POST 请求 并且我已将整个标头和正文复制为请求可以使用的格式 我得到 H
  • WebStorm已将目录中的所有文件标记为非项目文件

    WebStorm 已将我的项目子目录 根目录的服务器部分 中的所有文件标记为非项目文件 它发生在我转换到 Babel 然后又转换到 TypeScript 的过程中 我已经删除了 TypeScript 的内容 想知道这是否与该配置有关 我相信
  • 如何在 Rollup 中配置从多个输入文件仅生成单个输出文件?

    配置Rollupjs生成库时 如果输入是由多个javascript文件组成的数组 我们如何才能将这些输入生成为一个输出 js 文件呢 export const lgService input src app services livegiv
  • 封装的闭包与类?

    我是 JS 来自 C etc 的新手 我突然想到闭包似乎是比类更简单 更方便的处理封装的方法 这段代码似乎给出了一种处理封装的简单方法 function addProperty o var value o get function retu
  • 在 Angular 中将图像 url 转换为 base64

    我正在努力尝试将给定的图像 url 转换为 base64 在我的例子中 我有一个带有图像路径的字符串 var imgUrl assets logoEmpresas empresa logoUrl 我如何直接将给定的图像网址转换为base64
  • jQuery:在方法上取消绑定 jQuery 2.0

    在 jQuery 1 9 中live 已被弃用 因此新方法变为 document on mouseover blahblahfunc 我无法解除 blahblahfunc 的绑定 通过 unbind mouseover mouseout c
  • 如何在alert()之后给予focus()?

    我有类似的东西
  • Ember 未在生产环境中加载某些图像

    我有一个 Ember cli 1 13 应用程序 它在公共目录中存储了很多图像 现在 它将正确加载除特定组件中的图像之外的所有图像 该组件的调用方式如下 list item url list url name List Name price
  • 无法读取未定义的属性“messageHandlers”

    我想将 JavaScript 变量传递给 Swift 我在 JavaScript 中遇到错误并进行了搜索 但没有得到任何结果 错误是 类型错误 无法读取未定义的属性 messageHandlers 任何人都可以帮忙吗 我在 Xcode 中的
  • 在 JavaScript 中给变量字符串加上引号

    我有一个 JavaScript 变量 var text http example com 文本可以是多个链接 如何在变量字符串周围放置 例如 我希望字符串看起来像这样 http example com var text http examp
  • HTML5:从存储的二进制字符串播放视频

    我正在尝试使用 FileReader readAsBinaryString Blob File 将视频文件的内容作为二进制字符串读取 如示例中所示http www html5rocks com en tutorials file dndfi
  • 设备收到 GCM Android 通知但未显示

    尽管通知已在应用程序本身中注册 但我的 Ionic Android 应用程序的 GCM Cloud 消息通知未出现在我的设备的主屏幕中 我正在使用 npm 模块node gcm https www npmjs com package nod
  • 批量删除如何工作?

    我尝试使用bulkDelete让我的机器人删除其消息 但我收到此错误 node 5724 UnhandledPromiseRejectionWarning Unhandled promise rejection rejection id 1
  • 尝试利用?

    我看到我的 nopCommerce 网站记录了以下搜索 ADw script AD4 alert 202 ADw script AD4 我有点好奇他们想要完成什么 我搜索了一下 似乎是ADw script AD4 以 UTF7 编码为
  • (jQuery) 在 cookie 中单击时保存复选框状态

    关于此功能有很多主题 但我似乎无法让它工作 我在谷歌上搜索了这个具体案例 有一堆链接让我来到这里 但奇怪的是我似乎无法让它们工作 我所做的唯一工作如下 http dl dropbox com u 2238080 a old z htm ht
  • NodeJS:MySQL 有时会引发 ETIMEDOUT 错误

    我目前正在使用 NodeJS 开发一个应用程序 然而 经常服务器抛出这个错误 我无法与mysql交互 Error read ETIMEDOUT code ETIMEDOUT errno ETIMEDOUT syscall read fata
  • Git Visual Studio 与 Bitbucket confluence 连接到现有项目错误/获取失败

    如何使用 Visual Studio 17 从现有 Bitbucket GIT 存储库中提取数据 Error git 因致命错误而失败 找不到 xyz 存储库 I added 这个迷雾 https marketplace visualstu
  • Material-UI 中 IconButton 的悬停效果

    图标按钮悬停 https i stack imgur com lsYHX png 这是我正在使用的 Material UI 中的 iconButton 正如您所看到的 当您将鼠标悬停在图标上时 图标周围有一个轻微的灰色边框 禁用此功能的属性

随机推荐

  • iOS UITextField Swift 中的下划线样式

    我添加了这张用户界面登录图像 希望您能看到 请注意 除了底部的线条之外 文本字段是透明的 我需要输入什么代码才能产生这种效果 我可以将必要的信息放入 用户定义的运行时属性 中吗 创建一个子类UITextField如下所示 只需在故事板中将此
  • 克隆存储库后,Azure DevOps 强制 core.hooksPath

    我尝试实施客户端 git hooks到 azure devops git 存储库 我添加了一个 githooks目录到根目录并实施pre commit钩 我提交所有内容并将其推送到存储库 但当然 只有当我执行时 钩子才会激活 git con
  • 使用 Node.js 和 mongo 设置单例连接

    以前我使用 mongodb 和 php 来查询我使用单例的数据库 这样我只实例化连接一次 然后重复使用它 class MDB protected static instance public static function use if s
  • 如何在 Cucumber-JVM 中明确匹配这些步骤?

    有什么方法可以明确匹配以下步骤吗 And I should have 2 alerts And I should have 2 alerts with param 71 我将它们实现为 And I should have d alerts
  • 使用 file.show 在 R studio 中打开 PDF

    我正在制作一个在 Swirl 中在 R 中运行的 R 教程 我正在尝试在 R 中打开特定的 PDF 文件 我在用 file show paste getwd cv pdf sep title some title 但显示是这样的 它不显示
  • Growl 通知:如何从网站推送 Growl 通知?

    我想知道如何将桌面 Growl 通知从我的 Web 应用程序推送给我的 Web 应用程序的用户 如果可能的话 我想使用 javascript 否则像 Ruby 或 PHP 这样的语言将是我的第二选择 您以前实施过类似的事情吗 如何做呢 我弄
  • 从列表中删除 nan - Python

    我试图从列表中删除 nan 但它拒绝删除 我尝试过 np nan 和 nan 这是我的代码 ztt for i in z if i nan ztt append i ztt or ztt for i in z if i np nan ztt
  • Feedparser 到数据框不输出所有列

    我从 feedparser 解析 URL 并尝试获取所有列 但我没有将所有列作为输出 不确定问题出在哪里 如果执行下面的命令 我没有获得几列的数据 但数据确实存在 您可以在浏览器中查看 my code import feedparser i
  • 左连接查询的 LINQ Fluent API 版本

    我目前有一个运行良好的 LINQ 查询 但我想知道如何将其转换为 LINQ Fluent API 格式 我尝试在 Google 上搜索有关 Fluent API 的不错的教程 尝试自己学习 但似乎没有 这是我要转换的查询 from s in
  • Jersey 2 多部分表单数据注入源

    我有一个方法 POST Consumes multipart form data Produces text xml public Response processForm FormDataParam myparam InputStream
  • RabbitMQ 失败,错误:无法连接到节点rabbit@TPAJ05421843:nodedown

    在 Windows 7 Enterprise 计算机上 我全新安装了 Erlang 17 4 和 RabbitMQ 3 4 3 x64 安装成功且顺利 我还没有尝试创建我的第一个队列或交换器 但我已经看到了麻烦 这个问题类似于另一个SO帖子
  • 不将数据保存到文档方向

    我尝试将数据保存到文档目录中 我没有收到任何错误 但它从不保存数据 它总是说 文件不存在 创建它 let fileManager FileManager default if let documentsDirectory fileManag
  • Control.BeginInvoke 是否有一个变体可以在句柄被销毁之前/之后工作?

    我有一个显示底层异步对象状态的控件 该对象引发事件 这些事件到达表单 在那里它们基本上排队并最终使用 BeginInvoke 进行调用 当控件被废弃时就会出现问题 因为事情是异步发生的 这意味着事件回调在处理过程中总是可能排队 所以我有时会
  • 找不到导入的项目“C:\Microsoft.CSharp.targets”

    我今天尝试打开 Visual Studio 2008 时遇到此错误project在 Visual Studio 2005 中 找不到导入的项目 C Microsoft CSharp targets 在记事本 或记事本 中打开您的csproj
  • 整数转换(缩小、扩大)、未定义的行为

    对我来说 以我可以轻松理解的方式找到有关该主题的信息非常困难 因此我要求对我所找到的内容进行审查 这都是关于转换和转换的 在示例中我将提到 signed unsigned int bigger signed unsigned char sm
  • 如何在 Java 中检测苹果芯片 (M1) 与英特尔芯片?

    对于每个不理解这个问题的人 请注意 os arch属性只会给你JRE的架构 而不是底层操作系统的架构 这不能回答我的问题 如果在 64 位系统上安装 32 位 jre System getProperty os arch 将返回 x86 为
  • 如何“取消转换”来自 South (Django) 的应用程序?

    我的内心发生了很大的变化models py 包括删除很多字段 并重命名几个类 schemamigration auto工作正常 但尝试migrate抛出一堆错误 我的所有代码目前都在开发中 所以我不介意丢失太多数据 所以我希望 South
  • 请求失败,HTTP 状态为 401:未经授权。 SSRS

    我在 MVC Web 项目中有一个处理 SSRS 的类 当我在 IIS 计算机中运行该应用程序时 我可以正常访问报告 当从网络上的另一台计算机运行时 出现 请求失败 HTTP 状态 401 未经授权 报表服务器有自己独特的凭证 不接受网络上
  • WinDbg:APPLICATION_HANG_WRONG_SYMBOLS

    我对 WinDbg 还很陌生 我正在尝试找到一个导致我的应用程序无缘无故挂起的错误 我不确定我做的事情是否正确 但我知道我需要系统 dll 以及我正在调试的 exe 的符号 因此 我这样设置符号路径 srv c websymbols htt
  • post方法的问题(使用fetch和express)

    我是一个非常初学者 所以我希望我的问题不是那么愚蠢 我想要做的是将经度和纬度从客户端 JavaScript 传递到服务器端的 Node js 中 我正在使用 fetch 和express js 下面是我的 html 代码 latitude