php

Configurar CORS en PHP

Resumen: mostrar cómo usar encabezados HTTP y la función header en PHP para permitir CORS y métodos como GET, POST, PUT, OPTIONS y DELETE.

CORS no es algo que se habilite o permita, es una forma de compartir recursos en dominios u orígenes distintos. Por ejemplo, permitir que sitio.com le haga peticiones a parzibyte.me

Para ello, el servidor debe estar de acuerdo y debe enviar algunos encabezados.

Los encabezados

Supongo que hay varios pero aquí pongo los más importantes y comunes.

  • Access-Control-Allow-Origin: los orígenes permitidos, que debe ser el dominio con todo y http o https.
  • Access-Control-Allow-Headers: encabezados permitidos. En la mayoría de casos solo es el content-type
  • Access-Control-Allow-Methods: métodos o verbos HTTP permitidos

En Allow-Origin podemos poner un * pero recomiendo siempre poner el dominio

En Allow-Methods podemos colocar varios verbos HTTP separados por coma.

CORS con PHP

Ando haciendo un tutorial de HTTP de Angular con PHP, y para ello PHP debe usar CORS porque las peticiones de HttpClient de Angular las hago de un dominio distinto a donde tengo mi servidor.

Por ello es que tengo un archivo de cors:

<?php
/*
    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/$dominioPermitido = "https://servicio-http-angular.stackblitz.io";
header("Access-Control-Allow-Origin: $dominioPermitido");
header("Access-Control-Allow-Headers: content-type");
header("Access-Control-Allow-Methods: OPTIONS,GET,PUT,POST,DELETE");

Recuerda que debes cambiar la variable $dominioPermitido por tu dominio desde donde haces las peticiones con JS.

Después lo incluyo al inicio de todos los archivos que van a servir para armar la API. Obviamente esto se puede simplificar poniendo todo en una función común o con un autoload.

Yo lo coloco en la parte superior por simplicidad:

<?php
include_once "cors.php";
$idPersona = $_GET["id"];
$mensaje = "Ok se elimina a la persona con id $idPersona";
echo json_encode($mensaje);

Y aunque en este caso estoy consumiendo la API con Angular, esta configuración es general y debería funcionar para cualquier otro framework, incluso funcionaría para fetch.

Nota final importante: recuerda que al menos en PHP los encabezados deben ser los que se imprimen antes de cualquier cosa, es decir, antes de un echoprintf o cosas que escriban en el cuerpo de respuesta.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.