Gestionar un sitio web no es una tarea complicada, pero hay varios aspectos que pueden representar un verdadero desafío. Uno de ellos es comprender la variedad de códigos de estado HTTP que pueden aparecer al establecer una conexión o ejecutar un proceso específico.
En este artículo, el protagonista es el código de estado 303, el cual, dependiendo de las circunstancias, puede interpretarse como un error o utilizarse estratégicamente para realizar una redirección.
A lo largo del contenido, explicaremos su funcionamiento y cómo implementarlo en caso de ser necesario.
Tabla de contenidos
¿Qué es el código 303?
El código de estado 303 es una respuesta del protocolo HTTP que indica que, aunque el servidor ha procesado correctamente la solicitud, la información solicitada no se encuentra en la URL original.
En estos casos, el navegador suele encargarse de redirigir automáticamente al usuario a una nueva dirección utilizando el método GET.
Este código pertenece a la familia de estados “3XX”, categorizados como redirecciones, y es conocido específicamente como “See Other”.
El código 303 es especialmente útil cuando una solicitud no debe repetirse múltiples veces, como en el caso de envíos de formularios o transacciones en línea. Su función principal es evitar que los datos enviados mediante POST, PUT o DELETE se reenvíen accidentalmente si el usuario actualiza la página o regresa en su navegador.
En algunos casos, como se muestra en la imagen referencial, el navegador puede generar un error http al intentar acceder a un recurso en un sitio web. Si la respuesta del servidor con el código de estado 303 no se gestiona correctamente, es posible que se produzca el error ERR_CONNECTION_TIMED_OUT.
¿Cómo funciona el estado 303?
El código de estado 303 “See Other” se manifiesta al redireccionar al cliente (El navegador o la API que realiza la solicitud) a una nueva URL, obligándolo a realizar una nueva solicitud por método GET, sin importar cuál fue el método original de la petición (POST, PUT o DELETE).
Esta redirección debería regresar previamente establecida mediante el encabezado “Location” en la respuesta del servidor. Cuando el cliente recibe este código, automáticamente hace una nueva petición GET a la URL proporcionada, evitando que se repita la solicitud original.
A continuación vamos a describir como funciona el código de estado 303 en un proceso convencional a modo de ejemplo.
Presentamos el escenario en el cual un determinado usuario ingresa sus credenciales en un formulario de inicio de sesión.
El resultado que deseamos luego de un inicio de sesión exitoso, es que el usuario sea redirigido a su panel de control sin volver a enviar sus credenciales en caso de que bajo cualquier circunstancia actualice la página desde su navegador.
1- El usuario envía una solicitud POST con sus credenciales: cuando el usuario llena el formulario de login y ejecuta el envío, el navegador realiza una solicitud POST al servidor.
POST /login HTTP/1.1 Host: ejemplo.com Content-Type: application/x-www-form-urlencoded usuario=johndoe&password=12345
2- El servidor verifica las credenciales y responde: si las credenciales ingresadas por el usuario son correctas, el servidor no devuelve directamente la página del panel de usuario, sino que responde con un código 303 “See Other” y se encarga de redireccionar al usuario a su panel de control.
HTTP/1.1 303 See Other Location: https://ejemplo.com/micuenta
3- El navegador sigue la redirección y realiza una nueva solicitud GET: en caso de que el usuario vuelva a consultar la URL para iniciar sesión, considerando que ya ha enviado sus credenciales en una solicitud anterior, la cual fue reciente, el navegador no volverá a enviar las credenciales.
En su lugar, lo que hará el navegador es ejecutar una nueva solicitud GET a la página del panel de control.
GET /micuenta HTTP/1.1 Host: ejemplo.com
4- El servidor responde con la página del panel de control: una vez que el usuario ingresa sus credenciales en el formulario de inicio de sesión y estas son correctas, es redirigido automáticamente a su panel de control, donde podrá acceder de manera autenticada.
Cabe destacar que, si actualiza la página, no tendrá que repetir el proceso de inicio de sesión, ya que su autenticación seguirá siendo válida.
¿Cuándo usar la redirección HTTP 303?
Si bien el ejemplo presentado en el punto anterior muestra el funcionamiento del código de estado 303, existen otras situaciones en las que puede aparecer y aprovecharse su capacidad de redirección.
Redirección segura después de iniciar sesión: en sitios webs con sistemas de autenticación, después de que un usuario ingresa sus credenciales en un formulario de inicio de sesión, la solicitud generalmente se envía mediante POST al servidor.
Si la autenticación es exitosa, lo ideal es no devolver una respuesta directa a la misma página para evitar que, si el usuario actualiza la pestaña, sus credenciales sean enviadas nuevamente.
En lugar de eso, el servidor responde con un código de estado 303, redirigiendo al usuario a su panel de control u otra página previamente configurada utilizando el método GET. De esta forma se mejora la seguridad y la experiencia del usuario, ya que evita el reenvío involuntario de credenciales.
Evitando reenvíos luego del envío en un formulario: cuando un determinado usuario completa un formulario, como un registro, un pago en línea o una solicitud de contacto, generalmente se envía una petición POST al servidor.
Si el servidor devuelve una respuesta aprobada (200 OK), y el usuario actualiza la página, el navegador podría volver a enviar la misma solicitud POST, lo que podría provocar un envío duplicado de datos.
Para evitar este comportamiento, el servidor responde con el código de estado 303 See Other, indicando al navegador que redirija al usuario a una nueva URL utilizando el método GET. De esta manera, si el usuario recarga la página, solo se repetirá la solicitud GET, y no se reenviarán los datos del formulario.
Redirecciones a una página alternativa: dependiendo del caso, es necesario redirigir a los usuarios desde una URL obsoleta o inválida a una nueva página. Si un usuario intenta acceder a una URL que ya no es válida o usa un método HTTP incorrecto, el servidor puede responder con un codigo de estado 303, indicando una redirección a la nueva ubicación utilizando GET.
Por ejemplo, si una página ha sido movida de “/antigua-pagina” a “/nueva-pagina”, pero el usuario intenta enviar una solicitud POST a la URL antigua, el servidor puede responder con un código 303, redirigiéndolo de forma automática a la nueva URL donde la información se obtiene correctamente gracias al método GET.
Nuevos recursos en una APIs REST: al trabajar con APIs REST, cuando un cliente envía una solicitud POST para crear un nuevo recurso, como un producto o un usuario, no siempre es conveniente devolver el recurso directamente en la respuesta.
En su lugar, se puede usar como respuesta el código 303 para indicar al cliente que ejecute nuevamente una solicitud GET a la URL donde pueda consultar el recurso recién creado.
Por ejemplo, si un cliente ejecuta una consulta POST a “/api/productos”, el servidor puede responder con un código 303 y un encabezado “Location” el cual apunte a “/api/productos/nuevo”, donde el cliente podrá obtener los detalles del nuevo recurso mediante el método GET.
De esta forma es posible mantener una separación clara entre la creación de un recurso y su recuperación.
¿Como hacer una redirección 303?
Por lo general, dependiendo de las herramientas de autenticación, los sistemas de eCommerce o los complementos de formularios, estos suelen integrar automáticamente las redirecciones con código 303 cuando un usuario realiza una solicitud. Sin embargo, en algunos casos es necesario configurar la redirección de forma manual.
A continuación, presentaremos algunas de las formas más comunes de establecer una redirección 303.
Redirección 303 desde .htaccess
Al validar si nuestro sitio web se encuentra alojado en un hosting web con Apache, dependiendo del proveedor es posible que podamos acceder al archivo .htaccess el cual se encontrara en la raíz del directorio de nuestro sitio web.
Una redirección 303 válida sería establecer una regla como la siguiente:
Redirect 303 /pagina-antigua https://ejemplo.com/nueva-pagina
La redireccion presentada como ejemplo puede ser modificada tanto como sea necesario, estableciendo reglas mas avanzadas como las siguientes:
RewriteEngine On RewriteRule ^pagina-antigua$ https://ejemplo.com/nueva-pagina [R=303,L]
Redirección 303 desde Nginx
Si nuestro servidor web trabaja con Nginx el procedimiento es similar. Primero, debemos localizar el archivo de configuración correspondiente a nuestro sitio web, que suele llevar el mismo nombre que el dominio asociado.
La ubicación de este archivo puede variar según la configuración del servidor, aunque generalmente se encuentra en la ruta estándar /etc/nginx/sites-available/.
Una vez identificado, simplemente debemos agregar el siguiente código dentro del bloque “server”.
server {
listen 80;
server_name ejemplo.com;
location /pagina-antigua {
return 303 https://ejemplo.com/nueva-pagina;
}
}
El comportamiento esperado al implementar esta declaración es que el usuario que ejecute una consulta a la URL antigua tenga una redirección asegurada a la URL nueva por medio del método GET.
Redirección 303 desde WordPress
(Visita el plugin haciendo clic en la imagen ↑)
Si queremos configurar una redirección en un sitio web basado en WordPress, existe una alternativa sencilla que no requiere código ni modificaciones en archivos del servidor, se trata del plugin Redirection.
Con solo instalarlo, podremos gestionar diversas redirecciones desde una interfaz intuitiva, lo que facilita la administración y configuración de todas las redirecciones necesarias para nuestro sitio web.
Con el plugin previamente instalado, podemos acceder a la configuración de redirecciones desde Herramientas -> Redirection para proceder a crear una nueva redirección.
La premisa de como funciona el plugin es muy simple, solo debemos ingresar la URL de origen (el contenido o recurso que será redirigido) y luego especificar la URL de destino.
Para asegurarnos de que la redirección se aplique con el código de estado 303, debemos expandir las opciones haciendo clic en el icono de la tuerca.
Desde el selector de código HTTP, podemos elegir el código 303, correspondiente a una redirección “Ver Otra o See Other”. Finalmente, solo queda hacer clic en “Añadir redirección” para guardar los cambios y activar la redirección.
Conclusión
En nuestro recorrido hemos podido apreciar que el código de estado 303 es una silenciosa pero poderosa herramienta encargada del manejo de redirecciones HTTP, ya que permite que los navegadores web y clientes sigan una nueva URL utilizando siempre el método GET, sin tener que repetir la solicitud original.
Esto es especialmente útil en escenarios como el procesamiento de formularios, inicios de sesión o transacciones, ya que previene problemas como el reenvío de datos cuando se actualiza la página.
Más allá de facilitar la redirección, su implementación mejora la experiencia del usuario y refuerza la seguridad al evitar acciones duplicadas que podrían generar errores, como pagos repetidos o múltiples envíos de formularios.
En definitiva, el código 303 y su capacidad de redirección son soluciones prácticas que garantizan un proceso de navegación más seguro y eficiente, ya sea para realizar una compra en línea o simplemente enviar un formulario de contacto.
También te puede interesar:
- ¿Qué son los códigos de respuesta 200?
- Redirección 301, guía definitiva
- ¿Qué es el error 304 y cómo solucionarlo?
- Tutorial Super Caché WordPress, cómo configurarlo
- Guía sobre códigos de estado HTTP
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
