Ajuster l'en-tête XHR

Question

Je veux créer un XHR en TypeScript. L'API que je veux accéder a l'adresse suivante:

https://my-url/user/login 

et devrait ressembler à ceci lorsque les données passant:

https://my-url/user/login?username=username&password=password&api_key=key 

Mon problème est que je formais mon XHR avec le https://my-url/user/login - url et quand En passant des données j'ai reçu un 404 (je suppose qu'il l'a formé comme ceci https://my-url/user/login/username=username...). Ma solution: passer l'en-tête directement dans XOR avec des éléments insérés:

 let xhr = new XMLHttpRequest(); 
     xhr.open("GET", "https://my-url/user/login?username=" + username 
      + "&password=" + password + "&api_key=key", true); 
     xhr.setRequestHeader("Accept", "application/json"); 
     // xhr.setRequestHeader("api_key", "key"); 
     //xhr.setRequestHeader("username", username); 
     // xhr.setRequestHeader("password", password); 
     xhr.onreadystatechange = function() { 
      console.log("state changed - new state: " + xhr.readyState + " and Status: " + xhr.status); 
      if (xhr.readyState === 4) { 
       if (xhr.status === 200) { 
        console.log("login Request successful: " + xhr.responseText); 
        alert("Logged in!"); 
       } else { 
        alert("Login failed!"); 
        console.log("Error: " + xhr.status + " Message: " + xhr.statusText); 
       } 
      } 
     }; 
     xhr.send(); 

Mais je voudrais de ne pas utiliser cette façon et comme il doit y avoir un moyen d'effectuer cette demande différemment - quelqu'un peut me donner un indice sur comment résoudre ceci?

Answer 1

D'abord, ne mettez pas de variables simples dans la requête. Utiliser encodeURIComponent (ref: Mozilla Developer)

Vous pouvez utiliser cette fonction pour formater correctement les paramètres GET.

function formatParams(params){ 
     return "?" + Object.keys(params).map((key) => { 
      return `${key}=${encodeURIComponent(params[key])}` 
     }).join("&") 
} 

Ensuite, vous pouvez l'utiliser comme ceci:

let xhr = new XMLHttpRequest(); 
xhr.open("GET", `https://my-url/user/login${formatParams({username, password, api_key: key})}`, true); 
xhr.setRequestHeader("Accept", "application/json");