El conjunto de encabezados Access-Control-Allow-Origin en .htaccess no funciona


91

No puedo entender por qué la .htaccessconfiguración de mi encabezado no funciona.

El .htaccesscontenido de mi archivo:

Header set Access-Control-Allow-Origin *
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "*"
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]

Pero cuando elimino Headerlos y los agrego index.php, todo funciona bien.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");

¿Qué me estoy perdiendo?

Respuestas:


135

Esto debería funcionar:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

46
No olvide activar los encabezados del módulo apachea2enmod headers
Lucas Serafim

1
Se solucionó: "El método PUT no está permitido por Access-Control-Allow-Methods"
Rahul Prasad

6
Además, es mejor usarlo Header seten este caso. Si se cambia el código y SÍ establece el encabezado, hacer que Apache lo header addhaga enviará encabezados dobles **. Esto romperá clientes como Restangular, por ejemplo.
Julián

2
No olvide, si es necesario,Header add Access-Control-Allow-Credentials "true"
Marco Marsala

20

Solo para que conste, me estaba encontrando exactamente con el mismo problema y ninguna de las respuestas funcionó.

Usé una herramienta de verificación de encabezados: http://www.webconfs.com/http-header-check.php

Estaba probando con mi IP ( http://192.0.2.1/upload) y lo que regresó fue lo siguiente:

HTTP/1.1 301 Moved Permanently => 
Date => Sat, 10 Jan 2015 04:03:35 GMT
Server => Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
Location => http://192.0.2.1/upload/
Content-Length => 380
Connection => close
Content-Type => text/html; charset=iso-8859-1

Hubo una redirección y la solicitud AJAX no respeta / sigue las redirecciones.

Resultó ser la barra que faltaba al final del dominio ( http://192.0.2.1/upload / )

Probé de nuevo con barra al final y obtuve esto a continuación. También se agregó una barra en el script y ahora estaba funcionando.

HTTP/1.1 200 OK => 
Date => Sat, 10 Jan 2015 04:03:53 GMT
Server => Apache/2.2.21 (Win32) mod_ssl/2.2.21 OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By => PHP/5.3.8
Access-Control-Allow-Origin => *
Access-Control-Allow-Methods => PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Headers => *
Content-Length => 1435
Connection => close
Content-Type => text/html

Utilice esta herramienta para probar si sus encabezados son buenos y para solucionar lo que está sucediendo.


5
Tengo 11 pestañas abiertas en este momento tratando de resolver esto. Esta respuesta debería estar en más lugares.
JDavis

Con el mío, necesitaba eliminar la barra diagonal. Me alegro de haber encontrado esto. Pasé mucho tiempo solucionando este problema cuando lo nuevo, debería haber estado funcionando hace horas.
gorelog

11

Tengo un alojamiento compartido en GoDaddy. También necesitaba una respuesta a esta pregunta, y después de buscar, descubrí que es posible.

Escribí un archivo .htaccess, lo puse en la misma carpeta que mi página de acción. Aquí está el contenido del archivo .htaccess:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Aquí está mi llamada ajax:

    $.ajax({
        url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

Consulte este artículo como referencia:

El conjunto de encabezados Access-Control-Allow-Origin en .htaccess no funciona


8

Tenga cuidado con:

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

Esto no es juicioso en absoluto para permitir el acceso a todos. Es preferible permitir una lista de hosts de confianza conocidos únicamente ...

Header add Access-Control-Allow-Origin "http://aaa.example"
Header add Access-Control-Allow-Origin "http://bbb.example"
Header add Access-Control-Allow-Origin "http://ccc.example"

Saludos,


3
Esto no funcionará. Access-Control-Allow-Origin no permite varios valores. Debe configurar dinámicamente el encabezado según el valor del encabezado de solicitud de origen.
Quentin

7

Activé los encabezados a2enmod del módulo Apache y el problema se resolvió.


Los errores en el registro no dejaban claro por qué los cambios que estaba haciendo fallarían y esta respuesta ayudó mucho. sudo a2enmod headersy un reinicio lo hizo funcionar!
cchana

3

Pruebe esto en el .htaccess de la carpeta raíz externa

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Tenga cuidado con: Header add Access-Control-Allow-Origin "*" No es juicioso conceder acceso a todo el mundo. Creo que deberías usar:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://example.com"
</IfModule>

3

Hice +1 en la respuesta de Miro para el enlace al sitio del verificador de encabezados http://www.webconfs.com/http-header-check.php . Aparece un anuncio desagradable cada vez que lo usa, pero, sin embargo, es muy útil para verificar la presencia del encabezado Access-Control-Allow-Origin.

Estoy leyendo un archivo .json del javascript en mi página web. Descubrí que agregar lo siguiente a mi archivo .htaccess solucionó el problema al ver mi página web en IE 11 (versión 11.447.14393.0):

<FilesMatch "\.(json)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

También agregué lo siguiente a /etc/httpd.conf (archivo de configuración de Apache):

AllowOverride All

El sitio del verificador de encabezados verificó que el encabezado Access-Control-Allow-Origin ahora se está enviando (¡gracias, Miro!).

Sin embargo, Firefox 50.0.2, Opera 41.0.2353.69 y Edge 38.14393.0.0 obtienen el archivo de todos modos, incluso sin el encabezado Access-Control-Allow-Origin. (Nota: es posible que estén verificando direcciones IP, ya que los dos dominios que estaba usando están alojados en el mismo servidor, en la misma dirección IPv4).

Sin embargo, Chrome 54.0.2840.99 m (64 bits) ignora el encabezado Access-Control-Allow-Origin y falla de todos modos, informando erróneamente:

No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' {mydomain} '.

Creo que esto tiene que ser una especie de "primera". IE funciona correctamente; Chrome, Firefox, Opera y Edge tienen errores; y Chrome es el peor . ¿No es exactamente lo contrario del caso habitual?


0

Después de pasar medio día sin nada funcionando. Usando un servicio de verificación de encabezado, aunque todo estaba funcionando. El firewall en el trabajo los estaba quitando


0

prueba esto:

<IfModule mod_headers.c>
     Header set Access-Control-Allow-Credentials true
     Header set Access-Control-Allow-Origin "your domain"
     Header set Access-Control-Allow-Headers "X-Requested-With"
</IfModule>

Es preferible permitir una lista de hosts de confianza conocidos.


0

Si alguien más está intentando esto, la respuesta más votada debería funcionar. Sin embargo, si tiene problemas, es posible que el navegador haya almacenado en caché la SOLICITUD. Para confirmar, agregue una cadena de consulta.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.