如何使用 express js 处理 fetch API 请求

Posted

技术标签:

【中文标题】如何使用 express js 处理 fetch API 请求【英文标题】:How to handle fetch API request with express js 【发布时间】:2020-11-27 22:59:25 【问题描述】:

我想使用 fetch API 发送请求,并希望使用 Express JS 处理这些请求。

我已经创建了 server.js (express JS), index.html (home page) 和 signin.html (signin page) .

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1> <center>Welcome</center> </h1>
    <center> <button onclick="login()">Signin</button> </center>
</body>

<script>
    function login() 
       
        fetch('./signin.html')
        .then(res => console.log(res))
        .catch(err => console.log(err));        
       
</script>

</html>

server.js

const path = require('path');
const express = require('express');
const app = express();

app.get('/', (req,res) =>
    res.sendFile(path.join(__dirname,'index.html'));
); 

app.get('/signin.html', (req,res) =>
    res.sendFile(path.join(__dirname,'signin.html'));
); 

app.listen(8080);

我希望当用户点击登录按钮时,fetch apiserver.js 文件发送请求,server.js 将回复发送回@ 987654327@ 并将响应呈现给浏览器

有可能吗?

【问题讨论】:

使用validator。不再有&lt;center&gt;。二十多年来,我们使用 CSS 进行演示。 您可以尝试将 fetch api 代码转移到服务器端(包含在表单中的按钮)或 标签 【参考方案1】:

Ajax 的全部意义在于响应由您的 javascript 处理,而不是通过导航到新页面来处理。

现在,您可以 push a new URL into the history 和 replace the entire DOM of the page 使用新数据,但相对而言,它会非常复杂和繁琐。

只使用常规链接,不涉及客户端 JavaScript。

【讨论】:

实际上我的计划是在每个数据库查询请求中发送身份验证令牌并首先验证令牌然后执行查询。 如果您要处理整个页面,请使用 cookie。 那么,你能告诉我如何将身份验证令牌发送到带有标头的服务器吗? 但是,如果我使用 cookie 那么如何将标头添加到请求中?如何向服务器发送请求? 登录响应将包含一个Set-Cookie 标头。然后浏览器将在后续请求中发送Cookie 标头。

以上是关于如何使用 express js 处理 fetch API 请求的主要内容,如果未能解决你的问题,请参考以下文章

每次在 Node.js (Express.js) 中发出 API 请求之前,如何简化 Fetching Auth token?

javascript 在Express.JS中的Node.JS中使用Fetch API

使用 react js 和 express API 服务器发布一个带有 fetch 的对象

当我将 event.preventDefault() 与 fetch api、express 和 node.js 一起使用时,为啥 req.body 返回 null? [复制]

如何使用 React.js 中的 Fetch API 将数据发布到数据库

使用 fetch、multer、express 将 blob 数据发送到节点