3 votes

Comment ajouter des en-têtes d'authentification de base à une requête post qui renvoie du html ?

Pour l'un des projets sur lesquels je travaille, il existe un point de terminaison POST protégé par une authentification de base qui renvoie un formulaire HTML. Celui-ci est hébergé sur un serveur express et protégé par l'authentification de base de passport. Je veux avoir un autre formulaire HTML qui a un bouton qui, lorsqu'il est cliqué, charge ce html dans le navigateur. J'ai essayé d'avoir un formulaire similaire à celui-ci :

<form method="post" action="http://username:password@localhost:8080/endpoint">
     <input type="submit">  
</form>

Mais lorsque le bouton est cliqué et que je vérifie les en-têtes d'authentification sur le serveur, il semble qu'ils ne soient pas définis (req.headers.authorization = undefined). Je sais que je peux définir les en-têtes d'autorisation à l'aide de Javascript, mais si je fais cela, je ne sais pas comment charger le html dans le navigateur sur cette page. Donc, comment puis-je gérer un point de terminaison qui nécessite des en-têtes d'authentification de base, auquel on accède en utilisant post et qui renvoie du HTML ? Cela semble facile à faire, mais je ne sais pas comment m'y prendre.

0voto

Ryan Points 970

Vous devez ajouter les en-têtes d'authentification en javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script  src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
</head>
<body>

<form id="myForm">
    <input type="submit">
</form>

<script type="application/javascript">
    $("#myForm").submit(function (e) {
        var url = 'http://localhost:8080/endpoint';
        var username = 'username';
        var password = 'password';
        $.ajax
        ({
            type: "POST",
            url: url,
            dataType: 'json',
            async: false,
            headers: {
                "Authorization": "Basic " + btoa(username + ":" + password)
            },
            data: '{ "comment" }',
            success: function (response){
                $(body).empty();
                $(body).html(response);
            }
        });
        e.preventDefault();
    });
</script>
</body>
</html>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X