Following scenario. I have a simple login-form for username and password. Wher the user clicks the login-button the form is posted to the server which is checking the credentials. When they are okay, a redirect is made to the default landing-page.
For sending the form-data I have written the following:
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);
}
});
}
which is called like:
const response = await postData({ method: theForm.method, url: theForm.action, data: formData })
.then(response => {
console.log(response);
})
.catch(reason => {
console.error(reason);
});
In Chrome and Firefox the response has an responseURL-property which I could use for setting window.location.url = xhr.responseURL; to redirect the page. But this wont work in IE as the response-type is something completely other.
On the other hand I have the complete HTML (which is the content of the redirect aka the landing-page) in xhr.responseText but I have no idea how I can use this?
I tried to replace the page-content as described here But this is throwing a bunch of errors in Chrome and IE it's not working at all showing
SCRIPT70: Permission denied
Some additional notes. I am using TypeScript to write the client-code which is targeted to es6 and afterwards transpiled using babel-loader to es5 via webpack.
