如何在异步模式下使用XMLHttpRequest设置多个头数据？

Question

我的API调用需要在标头中传递API密钥，但我从API服务收到错误信息{"error":"2424452","message":"Invalid Api Key"}

我知道我的API密钥是有效的，因为我可以在Python中进行相同的API调用，例如：

req = requests.Session()
req.headers.update({'x-api-key': 'my-api-key', 'X-Product': 'my-product-name'})
req.get(url)

但是在JavaScript中，同样的调用会出错。我认为我没有正确设置头信息或其他什么问题吗？

var req = new XMLHttpRequest();
req.onreadystatechange=handleStateChange;
req.open("GET", "url", true);
req.setRequestHeader("Host", "api.domain.com", "x-api-key", "my-api-key", "X-Product", "my-product-name");
req.send();

• 这个 XMLHttpRequest 不是在浏览器中调用，而是在支持 XMLHttpRequest 的应用程序中使用。

这个 XMLHttpRequest 不是在浏览器中调用，而是在支持 XMLHttpRequest 的应用程序中使用。

- joke4me

Answer 1

setRequestHeader方法设置一个头信息，并接收两个参数(名称和值)。

如果您想要设置多个头信息，请多次调用setRequestHeader方法。不要在第一次调用时添加额外的参数。

- Quentin

Answer 2

如果您不想显式设置多个标题，可以使用以下方法：

function setHeaders(headers){
  for(let key in headers){
    xhr.setRequestHeader(key, headers[key]) 
  }
}
setHeaders({"Host":"api.domain.com","X-Requested-With":"XMLHttpRequest","contentType":"application/json"})

- Bilal Alam

Answer 3

downloadReportFile(id, query): Observable<Object[]> {
var url = `${environment.baseUrl}report?report_name=${id}${query}`;

return Observable.create(observer => {

  let xhr = new XMLHttpRequest();

  xhr.open('GET', `${url}`, true);
  xhr.setRequestHeader(environment.AUTH_TOKEN_HEADER_KEY, 'Bearer '+ 
  localStorage.getItem(environment.AUTH_TOKEN_STORE_KEY));
  xhr.responseType = 'blob';

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {

        let filename = "Claim_Report.csv"
        var contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        var blob = new Blob([xhr.response], { type: "text/plain;charset=utf-8" });
        if (typeof window.navigator.msSaveBlob !== 'undefined') {

          window.navigator.msSaveBlob(blob, filename);
          return;
        }

        const blobURL = window.URL.createObjectURL(blob);
        const tempLink = document.createElement('a');
        tempLink.style.display = 'none';
        tempLink.href = blobURL;
        tempLink.setAttribute('download', filename);

        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank');
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        setTimeout(() => {
          // For Firefox it is necessary to delay revoking the ObjectURL
          window.URL.revokeObjectURL(blobURL);
        }, 100);
      } else {
        observer.error(xhr.response);
      }
    }
  }
  xhr.send();

});
 }

- Shashwat Gupta