Question

我目前正在尝试在Ionic移动应用程序中通过Azure创建聊天机器人。我已经启动了聊天机器人，并在应用程序中成功运行，但是该机器人的唯一标识符（秘密，我相信它被称为）直接附加到该机器人的站点URL，这意味着任何用户只要访问此秘密即可访问该机器人。。

<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>

我决定尝试另一种在线发现的方法，该方法利用XMLHttpRequest对象检索令牌并将我的机器人的机密信息放在标头中。这样，我可以使用XMLHttpRequest对象的readyState和status来访问该机器人，而无需用户看到该机器人的秘密。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  xhr: any;

  constructor() {
    this.xhr = new XMLHttpRequest();
    this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
    this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
    this.xhr.send();

    if (this.xhr.readyState == 4 && this.xhr.status == 200) {
      ...
    }
  }
}

但是，if语句中的代码正文永远不会运行。我做了一个console.log来检查xhr的readyState和status值，但是结果分别是1和0。此外，我在控制台中扩展了xhr的对象，readyState为4，状态为200。

我现在的问题是：XMLHttpRequest对象为什么包含我需要用来提供HTML文件完整URL的参数（即readyState和status），但是当我尝试访问它们时，却得到了不正确的信息？

Answer 1

时间！

您正在测试请求发送之前对其进行的测试（但是稍后要在控制台中对其进行查看）。

您需要等待就绪状态更改。

this.xhr.addEventListener("readystatechange", handler);

function handler(event) {
    if (this.readyState == 4 && this.status == 200) {
        // ....
    }
}

虽然没有必要手动进行测试。现代浏览器支持加载事件。

this.xhr.addEventListener("load", handler);

function handler(event) {
    // ....
}

XMLHttpRequest对象未正确返回其参数

1 个答案: