如何将基本身份验证标头添加到表单答案

【问题标题】：How to add basic authentication header to form如何将基本身份验证标头添加到表单
【发布时间】：2026-02-11 10:00:01
【问题描述】：

我正在使用基于 https://github.com/passport/express-4.x-local-example(just 构建的节点服务器，在 server.js 中将 app.get('/login'... 更改为 app.post('/login' ...。

在 pug 中，我使用基于 https://www.w3schools.com/howto/howto_css_login_form.asp 的登录表单创建了一个页面，当我提交表单时（输入名称更改为用户名和密码，method="post", action "/login"）一切正常。由于我不想在没有身份验证的情况下在正文中发送密码，因此我需要在我的发布请求中添加基本身份验证。我该怎么做？

我尝试将事件侦听器提交添加到我的表单并使用event.preventDefault(); 停止默认操作。然后我创建了new XMLHttpRequest()，将请求标头设置为基本身份验证并将 XML 请求发送到服务器。使用控制台时，我可以验证请求是否进入，完成了工作，但是来自服务器的回复（应该重定向）返回到我的 XML 请求，而不是实际重定向页面。当我尝试通过 POSTMAN 发送相同的 POST 请求时，响应是一个重定向页面。如果我删除事件侦听器，表单将被提交并且一切正常（但不添加 auth 标头）。

  doctype html
  head
    meta(charset='UTF-8')
    title Login
    link(rel='stylesheet', href='stylesheets/main.css')
    link(rel='icon', type="image/png", href='favicon.png')
  body 
    form(action='/login', id='form1' method='post')
      .imgcontainer
        img.avatar(src='images/img_avatar2.png', alt='Avatar')
      .container
        label(for='username')
            b Username
        input(type='text', placeholder='Enter Username', name='username', autofocus, required, id='uname')
        label(for='password')
            b Password
        input(type='password', placeholder='Enter Password', name='password', required, id='pword')
        button(type='submit') Login

  script. 
       document.getElementById("form1").addEventListener("submit",   submitFunction);

       function submitFunction() {
            event.preventDefault(); 
            var usr=document.getElementById('uname').value;
            var pwd=document.getElementById('pword').value;
            var obj = {'username' : usr, 'password' : pwd};
            var request = new XMLHttpRequest();
            request.open("POST", "/login", false);
            request.setRequestHeader('Authorization', 'Basic Y2xpZW50SUQ6c2VjcmV0S2V5'); 
            request.setRequestHeader('Content-Type', 'application/json');
            request.send(JSON.stringify(obj));
       }

【问题讨论】：

标签： node.js forms express authentication passport.js

【解决方案1】：

不需要身份验证，并且不会使您的请求安全，因为没有加密，HTTP 请求仍然是纯文本。

加密将使您的请求安全，您的页面和 API 都应使用 HTTPS，并且在使用加密时您不需要额外的身份验证。

【讨论】：

【解决方案2】：

我找到了包含标题的解决方法。首先，我使用了错误的护照策略。我使用本地并且应该使用 ('passport-http').BasicStrategy。这是一个例子 https://github.com/passport/express-3.x-http-basic-example 我在我的 XMLHttpRequest 中添加了一个占位符来响应，所以我的哈巴狗的脚本部分现在看起来像

script.
    document.getElementById("form1").addEventListener("submit", submitFunction); 
    function submitFunction() {
         event.preventDefault();   
         var username = document.getElementById('uname').value;
         var password = document.getElementById('pword').value;
         var request = new XMLHttpRequest();
         request.onreadystatechange = function() {
             if (this.readyState == 4) {
                    // Typical action to be performed when the document is ready:
                    // accept and redirect code in here based on the answer from the server
             }
         };
         request.open("POST", "/login", false);
         request.setRequestHeader('Authorization', "Basic " + btoa(username + ":" + password)); 
         request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
         request.send();
       }

当然，正如 Absor 所说，他的回答（谢谢）仍然只是纯文本，所以也许它不会增加我的请求的安全性。

【讨论】：