Informática

Ξ 18 comentarios

Cómo habilitar CORS en Apache y/o PHP

por Xabadu
Cómo habilitar CORS en Apache y/o PHP

Muchas veces cuando estamos trabajando en nuestros desarrollos Web nos hemos encontrado con alguna situación en la que debemos cargar contenido remoto de forma asincrónica, y este se encuentra un servidor distinto a donde está nuestra aplicación. Por defecto esto no es posible debido a que los navegadores prohiben que las páginas accedan a recursos alojados en servidores externos, esto para evitar que malandros de la programasound y la Internerd hagan de las suyas (?).

Pero, ¿qué pasa si Uds. no son de esos malandros y quieren hacerlo? Hoy les enseñamos como habilitar esto mediante un protocolo llamado CORS, el que permite este tipo de conexiones, tanto a nivel de servidor como de código (en caso de que no tengan acceso a la configuración del servidor).

Toda la información, como siempre, después del salto.

¿Qué necesitamos?

  • Un servidor Web con Apache y/o PHP.
  • No tenerle miedo a las alturas (opcional)

 

¿Cómo lo hago?

Antes de comenzar, para quienes tienen dudas, una aclaración necesaria:

¿Qué es CORS?

CORS (Cross-Origin-Resource-Sharing) es un mecanismo o protocolo de seguridad que permite hacer peticiones de forma asincrónica a través de Javascript desde un servidor a otro, con el fin de obtener información o recursos para usar en el servidor de origen (que realiza la petición original).

Si bien por defecto los navegadores rechazan este tipo de peticiones, a través de CORS es factible tanto habilitarlas como especificar que tipo de peticiones y desde donde son permitidas.

Con eso claro, vamos al detalle. Específicamente veremos como habilitar CORS de dos formas:

  1. Directamente en el servidor (Apache) a través de un .htaccess
  2. En el código específico del contenido o recursos que queremos pedir.

 

1.- Habilitando CORS en Apache a través de .htaccess

Para habilitar CORS, solo debemos incorporar una línea en el archivo .htaccess del directorio al cual vamos a acceder. En caso de que ese directorio no contenga un .htaccess, podemos crearlo con nuestro editor de texto favorito.

De cualquier forma lo abrimos y agregamos la siguiente línea:

Header add Access-Control-Allow-Origin "*"

Específicamente lo que estamos haciendo es indicar que ante cualquier petición se agregue una cabecera en la que se indique que se están aceptando peticiones desde distintos servidores al actual, y responder a ellas como si fuesen peticiones locales. El asterisco que aparece al final es un parámetro que representa desde que hosts vamos a aceptar peticiones. En este caso, como indicamos un asterisco, implica que cualquier petición desde cualquier servidor será aceptada y tratada como local, lo que sin duda es un riesgo en términos de seguridad, por lo que se recomienda tratar de restringirlo solo a los servidores que tenemos certeza que las harán, de la siguiente forma:

Header add Access-Control-Allow-Origin "http://www.example.com"

De esta forma, solo las peticiones que tengan como origen el servidor ‘example.com’ serán aceptadas. Si no tenemos certeza desde donde realizaremos las peticiones, entonces deberemos quedarnos con la original (asterisco).

Para comprobar que las peticiones estén siendo aceptadas, podemos ejecutar CURL a través de consola de la siguiente forma:

curl -I http://www.example.com

Donde example.com es nuestro servidor. El parámetro que va entre curl y el dominio es una i mayúscula. Esto hará que nos retorne solamente las cabeceras del sitio en vez de todo el contenido, y si todo funciona correctamente nos debería mostrar algo como esto:


HTTP/1.1 200 OK

Date: Thu, 06 Feb 2014 07:39:02 GMT

Server: Apache/2.2.25

X-Powered-By: PHP/5.3.27

X-Pingback: http://www.example.com/xmlrpc.php

Vary: Accept-Encoding,User-Agent

Access-Control-Allow-Origin: *

Content-Type: text/html; charset=UTF-8

La línea destacada indica que CORS ya está habilitado en el servidor y podemos empezar a hacer peticiones sin problemas.

Nota: Si por alguna razón esto no resulta (no se muestra, o las peticiones aún siguen siendo rechazadas), hay que chequear que tengamos mod_headers habilitados en Apache y/o que no esté desactivada la opción para sobreescribir los archivos .htaccess

Nota 2: Dependiendo de la ubicación del .htaccess (y si no hay otros en niveles inferiores), la misma configuración debería aplicarse a subdirectorios y archivos de ese nivel.

Y ahora, ¿qué pasa si no tenemos acceso a editar los archivos .htaccess?. Para eso está nuestra segunda opción, habilitar las cabeceras a nivel de código.

2.- Habilitando CORS en el código a través de PHP

Esto es aún más sencillo que lo anterior. Para habilitar CORS, solo debemos ir al archivo PHP sobre el cual realizaremos una petición e incluir lo siguiente:

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400'); 
}

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}

El código anterior genera un efecto similar a lo que vimos en el número 1. Cuando el script en PHP se ejecute, automáticamente se añadirán las cabeceras que permiten el acceso remoto (mediante la función header que pasa como parámetro el tipo de cabecera a insertar). Adicionalmente podemos agregar cabeceras para las opciones y/o tipos de peticiones que se aceptarán (en la sección OPTIONS del código anterior). Esto último es opcional.

Guardamos y hacemos la prueba, con lo que deberíamos poder realizar la petición sin problemas.

Y con eso podemos habilitar CORS, tanto a través de servidor como a nivel de código.

Antes de terminar, les recordamos que como siempre este tutorial ha sido desarrollado, probado y documentado por el equipo de Cómo Lo Hago, por lo que cuenta con nuestro sello de garantía:

Sello de GarantÍa CLH

Cualquier duda o comentarios que puedan tener, los invitamos a dejarnos unas líneas a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

¡Hasta la próxima!

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

18 Comentarios

  • Hello friends, how is the whole thing, and what you desire
    to say regarding this post, in my view its in fact remarkable in support
    of me.

  • Thank you, I have recently been searching for information approximately this topic for
    ages and yours is the best I’ve found out till now.
    However, what about the conclusion? Are you sure
    in regards to the source?

  • Out off all rooms at hoje the one that I get asked probably the
    most questions about, one that seems to causae people probably the most Feng Shui
    problems could be thhe bedroom. For example, brass, wrought iron, and powder coated steel aare quite popular.
    No matter whaat type of drawers, shelving or dressing table you choose,
    you can be sure that they’ll not detract out of your new wardrobes.

  • That is very attention-grabbing, You are an overly professional blogger.
    I’ve joined your feed and look ahead to seeking
    more of your wonderful post. Also, I’ve shared your web site in my social networks

  • is provides effective various Book materials and
    equipment Just likes: Book binding materials,
    Bookcovering materials, Wooden binding equipment, covering materials.
    The second key to consider will be the thermal requirements in the application. standard rack PLC Splitter is really a key component in FTTH and is responsible to distribute the signal from CO to variety of premises.

  • Because of this, additional Filipinos were able to own condominium units where they are able
    to take pleasure in the same luxurious living space that other popular condominiums are recognized
    to offer. However, if you are planning to create this location your yearly
    location, you could possibly consider buying. These
    packages include all of the accommodation facilities an example may be trying to find when on vacation.

  • Über die Ballade jener britischen Plastischen
    Chirurgie ebenso wie des Verbandes der „BAPS British
    Association of Plastic Surgeons“ obwohl welcher
    beiden Weltkriege ferner der Hiatus wird
    in der seitens Wallace, „Honorary Archivist to the
    Association“ herausgegebenen Vierzigjahresfestschrift
    mit vielen Einzelheiten berichtet (Wallace
    1987).
    Zur gleichen Phase in Bezug auf Ganzer (1879–1960)
    in Berlin erbrachte Kazanjian in Etaples nahe
    Boulogne im Übrigen den Frontlinien den wichtigen
    Anteil welcher prothetischen Zahnheilkunde z. Hd.
    Chip Erstbehandlung der Schusswunden des Gesichtes.
    Kazanjian war als Zahnchirurg Mitglied
    dieser „First Harvard Unit Attached to the British
    Expeditionary Force“ (Kazanjian and Converse
    1949).1920 kehrte er in die Amerika zurück, trat in
    die „Harvard Medical School“ ein neben wurde
    „einer der führenden Plastischen Chirurgen welcher
    Welt“ (Converse 1977).
    Dies plastisch-chirurgische Verfahren
    in Zeitintervall dieser „Adoleszenz
    unter anderem des Wachstums“ 1918–1939
    Alternative wichtige Feinheiten dieser Entwicklung
    des Konzeptes der Plastischen Chirurgie in den
    Amerika außerdem gen internationaler Ebene bis zum Finale
    145 4
    4.1 • Die neue Wissen – Mann, Gillies, Converse

  • Gracias por su respuesta tan buena, gaste muchas horas buscando una solución, Estoy haciendo una pagina que se comunica con ajax hacia un web service que tengo alojado en Hostinger, y entregaba siempre el error de “Access-Control-Allow-Origin”.

    La solución que me funciono a la primera fue el crear el archivo .htaccess en la carpeta.

    Gracias por la solucion entregada

1 2

Responder a Pedro Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos