使用 XMLHttpRequest 发布表单后重定向答案

【问题标题】：Redirect after posting form using XMLHttpRequest使用 XMLHttpRequest 发布表单后重定向
【发布时间】：2018-05-01 13:47:41
【问题描述】：

以下场景。我有一个简单的用户名和密码登录表单。当用户单击登录按钮时，表单将发布到正在检查凭据的服务器。当它们正常时，将重定向到默认登录页面。

为了发送表单数据，我写了以下内容：

static async postData<TResult>(options: { method: string, url: string, data?: any }): Promise<TResult> {
    return new Promise<TResult>((resolve, reject) => {
        try {
            const xhr = new XMLHttpRequest();

            xhr.onload = (): void => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(xhr.response);
                    } else {
                        reject(xhr.status);
                    }
                }
            };

            xhr.withCredentials = true;
            xhr.open(options.method, options.url, true);
            xhr.send(options.data);
        } catch (e) {
            console.error(e);
        } 
    });
}

它被称为：

const response = await postData({ method: theForm.method, url: theForm.action, data: formData })
    .then(response => {
        console.log(response);
    })
    .catch(reason => {
        console.error(reason);
    });

在 Chrome 和 Firefox 中，响应有一个 responseURL-property，我可以使用它来设置 window.location.url = xhr.responseURL; 来重定向页面。但这在 IE 中不起作用，因为响应类型完全不同。另一方面，我在 xhr.responseText 中有完整的 HTML（即重定向的内容，也就是登录页面），但我不知道如何使用它？

我尝试按照here 的描述替换页面内容，但这会在 Chrome 和 IE 中引发一堆错误，它根本无法显示

SCRIPT70：权限被拒绝

一些附加说明。我正在使用 TypeScript 编写针对 es6 的客户端代码，然后使用 babel-loader 通过 webpack 转译为 es5。

【问题讨论】：

标签： javascript xmlhttprequest

【解决方案1】：

我认为你需要尝试下一个代码：

    location.href = 'http://www.example.com' or 
    location.assign("http://www.mozilla.org"); // or
    location = "http://www.mozilla.org";

【讨论】：