Question

我想在TypeScript中创建一个XHR。我想访问的API有以下网址：

https://my-url/user/login

，在传递数据时应如下所示：

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

我的问题是，我用https://my-url/user/login - url形成了我的XHR，并且在传递数据时我收到了404（我猜是因为他形成了这样https://my-url/user/login/username=username...）。我的解决方法：使用插入的元素将标题直接传递给xor：

        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();

但我不想这样使用，因为必须有一种方式以不同的方式执行此请求 - 有人可以给我一个如何解决这个问题的提示吗？

Answer 1

首先，不要在请求中放置普通变量。使用encodeURIComponent（参考：Mozilla Developer）

您可以使用此功能正确格式化GET参数。

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

然后你可以像这样使用它：

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

调整XHR标头

1 个答案: