Tengo un botón que, cuando se hace clic, inicia una solicitud POST a mi API. Luego quiero tomar la URL de respuesta de la llamada API y redirigirla.
Así es como se ve mi JS:
function submitPassowrd(url) { let xhr = new XMLHttpRequest(); xhr.open("POST", url, false); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(); let u = xhr.responseText if (xhr.status === 200) { window.location.replace(u); return false } return false }El problema es que, en lugar de redirigir a la URL desde la respuesta de la API, la está concatenando a la URL base. Entonces, si la URL es http://example.com , simplemente la agregará como: http://127.0.0.1:8081/http://example.com .
Dicho esto, cuando uso una URL codificada, funciona bien y me redirige correctamente al sitio web proporcionado en window.location.replace. Por ejemplo:
function submitPassowrd(url) { let password = document.getElementById('password').value; let xhr = new XMLHttpRequest(); xhr.open("POST", url, false); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify(); let u = xhr.responseText if (xhr.status === 200) { window.location.replace('http://example.com'); // <<<<<<< hard-coded URL return false } return false }Además, intenté usar window.location.href, lo que provocó exactamente el mismo comportamiento.
¿Qué puede explicar este comportamiento?
Debe usar window.location.href o simplemente window.location en lugar de window.location.replace para este caso de uso, en mi humilde opinión.
Dicho esto, la posible explicación para el comportamiento de .replace es que la URL está codificada y, por lo tanto, no se percibe como una URL (más bien como una cadena) y, por lo tanto, se concatena con la URL de la página actual. Puede console.log la salida de u para ver si la cadena devuelta está codificada.