从回调函数内部使用“纯”Node.js 进行重定向

Posted

技术标签:

【中文标题】从回调函数内部使用“纯”Node.js 进行重定向【英文标题】:Redirecting using "pure" Node.js from inside a callback function 【发布时间】:2019-05-24 19:08:00 【问题描述】:

以下是我的server.js 代码的 MCVE:

let fs = require('fs');
let http = require('http');

http.createServer((req, res) => 
    // Handles GET requests
    if(req.method == 'GET') 
        let file = req.url == '/' ? './index.html': '/login.html'; // just an example
        fs.readFile(file, (err, data) => 
            res.writeHead(200, 'Content-Type': 'text/html');
            res.end(data);
        );
     

    // Handles POST requests
    else 
        read(status => 
            if(status) 
                res.writeHead(302, 
                    'Location': 'http://localhost:8000/login.html',
                    'Content-Type': 'text/html'
                );
                res.end();
                console.log('Redirected!');
            
        );
    
).listen(8000);

// In my actual script, the `read` function reads JSON files and sends data,
// so I've used the callback function
let read = callback => fs.readFile( './index.html', (err, data) => callback(true) );

而且,我有两个代码中提到的 HTML 文件。

index.html

<input type="submit" onclick='let xhr = new XMLHttpRequest(); xhr.open("POST", "http://localhost:8000"); xhr.send();'>

我使用内联脚本来最小化我的 MCVE 中的流量。出于开发目的,我将在我的网站上使用外部脚本

login.html

<h1>Login</h1>

现在,当我打开http://localhost 时,index.html 会很好地显示出来。正如您所注意到的,index.html 只是一个按钮。因此,当我单击该按钮时,Ajax 请求被成功触发并且一切正常(没有控制台错误),除了页面不重定向这一事实。我不知道它出了什么问题或还缺少什么。

我是 Node.js 的初学者,在 Nodejs - Redirect url 和 How to redirect user's browser URL to a different page in Nodejs? 中阅读了有关重定向的内容,我进行了很多搜索,但没有得到任何提示。感谢您的宝贵时间!

另外,我知道 express,但我不考虑使用框架,因为它们隐藏了核心概念。


编辑:当我尝试在没有回调概念的情况下进行重定向时,它可以正常工作,正如this video 告诉我们的那样。

【问题讨论】:

你在处理POST请求时检查过status的值吗? @Pointy status 变量始终是 true 预期。 你为什么不用快递 浏览器不会通过 XHR 请求自动重定向,但您可以让 javascript 查找“Location”标头和 302 状态,如果找到,让 JavaScript 重定向到位置标头。 复制:***.com/questions/40273182/… 【参考方案1】:

这不是 node.js 的问题。这就是浏览器的行为方式。

Ajax (XHR) 不会在浏览器中触发重定向。当浏览器实现 XHR 时,浏览器开发人员假设您想要控制页面刷新行为。因此,他们确保 XHR 不会触发任何默认操作。所有重定向都将保持沉默,并且重定向的结果数据将传递给您的 XHR 对象的 onreadystatechange 回调。

如果您希望重定向触发页面刷新,您只需选择不使用 XHR。而是提交表单:

<!-- index.html -->
<form action="http://localhost:8000" method="post">
    <input type="submit">
</form>

如果您想使用 AJAX,则需要像我上面提到的那样在浏览器中进行重定向:

// server.js

// ...

http.createServer((req, res) => 

    // ...

    // Handles POST requests
    else 
        read(status => 
            if(status) 
                res.writeHead(200, 'Content-Type': 'application/json');
                res.end(JSON.stringify(
                    your_response: 'here'
                ));
            
        );
    
).listen(8000);

然后在浏览器中处理该响应:

index.html

<input type="submit" onclick='let xhr = new XMLHttpRequest();xhr.addEventListener("load", function()var response = JSON.parse(this.responseText);/* check response if you need it: */if (response.your_response === 'here') window.location.href = 'http://localhost:8000/login.html';);xhr.open("POST", "http://localhost:8000");xhr.send();'>

但这非常丑陋,几乎无法阅读。我建议将该 HTML 重构为如下内容:

<!-- index.html -->

<script>
    function handleSubmit () 
      let xhr = new XMLHttpRequest();
      xhr.addEventListener("load", function()
        var response = JSON.parse(this.responseText);

        /* check response if you need it: */
        if (response.your_response === 'here') 
          window.location.href = 'http://localhost:8000/login.html'; // REDIRECT!!
        
      );
      xhr.open("POST", "http://localhost:8000");
      xhr.send();
    
</script>

<input type="submit" onclick="handleSubmit()">

【讨论】:

感谢您抽出时间 :) 但是,我的真实示例是 MCVE,具有自定义表单(div),并且适用于 Ajax 请求。 login.html 基本上是一个 HTML 页面,它仅在凭据正确的情况下重定向用户。因此,我决定使用附加帖子中提到的 Node.js 进行重定向。 @rv7 使用 Node.js 重定向仅适用于我上面显示的表单方法。否则你必须在浏览器中重定向而不是 Node.js 我开始了赏金。如果没有答案可以满足我的愿望(在服务器端使用纯 Node.js 进行重定向),那么我会接受你的答案。 我相信 slebetman 是对的。在 Ajax 中,您不会从页面导航到其他任何地方。这可能会令人困惑,因为经典的表单提交是一个帖子 - 但它对根页面/位置本身做了额外的事情。 正确; “重定向”与 AJAX/XHR 不兼容。回到“jQuery 前端/回退到纯 HTML”的时代,这种模式随处可见(发出 XHR 请求,如果response.result = "OK",重定向到/blah;否则,显示错误@ 987654330@)。如今,随着单页应用程序的兴起,它变得不那么常见了(无需重定向到任何地方,因为没有其他页面可以重定向到)。【参考方案2】:

在处理 node js Web 应用程序时,您应该使用 express,除非您对使用建议的当前 node 版本有内部了解。

Express 很简单,你的代码看起来像这样(并重定向)

app.get('/index.html',function(req,res,next)
   res.redirect('/path/to/redirect/file')

链接: http://expressjs.com/en/4x/api.html#res.redirect

【讨论】:

以上是关于从回调函数内部使用“纯”Node.js 进行重定向的主要内容,如果未能解决你的问题,请参考以下文章

如何使用护照发送成功重定向的用户个人资料数据?

从 Node Js 重定向到 Spring 引导服务并发送回响应

node js - 当函数依赖于内部的异步函数时,如何从函数返回值

node.js 中的 Http 请求重定向和 cookie 处理

node.js 回调获取变量的意外值

如何从索引页重定向到Gatsby.JS项目中以编程方式生成的路由