Problema “CORS” usando AJAX y PHP

publicado por: Anonymous

Tengo este codigo de JQUERY:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
listarDetalle();_x000D_
_x000D_
});_x000D_
function listarDetalle(){_x000D_
     var accion="listar";_x000D_
       var URLprotocol = window.location.protocol;_x000D_
    $.ajax({_x000D_
     _x000D_
            type: "POST",_x000D_
            url: URLprotocol+"//gestionweb/includes/php/procesoDetalle.php",_x000D_
            data: { "accion":accion}, _x000D_
            dataType:'json',_x000D_
        _x000D_
            error: function(){_x000D_
                alert("error petición ajax");_x000D_
               _x000D_
            },_x000D_
            _x000D_
            success: function(data){_x000D_
                console.log(data);_x000D_
             _x000D_
                                   _x000D_
               for (var i = 0; i < data.length; i++) {_x000D_
        _x000D_
                var newRow =_x000D_
                    "<tr>" +_x000D_
                    "<td>" + data[i].idp + "</td>" +_x000D_
                    "<td>" + data[i].nombre + "</td>" _x000D_
                    "<td>" + data[i].marca + "</td>" +_x000D_
                    "<td>" + data[i].cantidad + "</td>" +_x000D_
                    "<td><input type='radio' id='"+data[i].idproducto+"' name='seleccion'/></td>"+_x000D_
                    "</tr>";_x000D_
                $(newRow).appendTo("#ticket tbody");                 _x000D_
       _x000D_
    _x000D_
               _x000D_
            _x000D_
        _x000D_
  _x000D_
_x000D_
        } }_x000D_
        _x000D_
}).fail( function( jqXHR, textStatus, errorThrown ) {_x000D_
_x000D_
  if (jqXHR.status === 0) {_x000D_
_x000D_
    alert('Not connect: Verify Network.');_x000D_
_x000D_
  } else if (jqXHR.status == 404) {_x000D_
_x000D_
    alert('Requested page not found [404]');_x000D_
  _x000D_
_x000D_
  } else if (jqXHR.status == 500) {_x000D_
_x000D_
    alert('Internal Server Error [500].');_x000D_
_x000D_
  } else if (textStatus === 'parsererror') {_x000D_
_x000D_
    alert('Requested JSON parse failed.');_x000D_
_x000D_
  } else if (textStatus === 'timeout') {_x000D_
_x000D_
    alert('Time out error.');_x000D_
_x000D_
  } else if (textStatus === 'abort') {_x000D_
_x000D_
    alert('Ajax request aborted.');_x000D_
_x000D_
  } else {_x000D_
_x000D_
    alert('Uncaught Error: ' + jqXHR.responseText);_x000D_
_x000D_
  }_x000D_
_x000D_
});;_x000D_
_x000D_
};

_x000D_

_x000D_

_x000D_

Y obtengo este error:

Pedido de Origen cruzado bloqueado: La Política de mismo origen no permite leer el recurso remoto en http://gestionweb/includes/php/procesoDetalle.php. (Razón: el pedido de CORS fue rechazado).

Probe con:

_x000D_

_x000D_

dataType:'jsonp',

_x000D_

_x000D_

_x000D_

Que encontre en una web, pero si hago eso me dice que fallo la carga del script. La verdad no se que hacer.
Adjunto imagenes de google chrome de los encabezados..la direccion aparece bien digamos es:

http://localhost/gestionweb/includes/php/procesoDetalle.php

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

como veran da el error 302 en procesoDetalle.php como que el recurso fue movido pero no entiendo.

Lo llamo desde otro script y todo bien

solución

Para empezar he de comentarte que esta línea es innecesaria:

 url: window.location.protocol + "//gestionweb/includes/php/procesoDetalle.php"

Si quieres mantener el esquema (http: o https:) basta con no indicarlo:

 url: "//gestionweb/includes/php/procesoDetalle.php"

Por otro lado, las reglas de CORS (o también conocidas como de intercambio de recursos de origen cruzado) impiden que puedas acceder a los recursos de una página externa si ésta no autoriza a tu sitio web a hacerlo.

Por defecto todas las consultas dentro de un mismo origen (misma URL o Same Origin Policy) se presuponen seguras y no hacen uso de CORS para su validación, sólo las consultas a orígenes (o URLs) externas.

Para ello el navegador realiza una consulta previa (preflight request) mediante el método HTTP OPTIONS.

Es precisamente esa consulta previa la que te ha fallado y, por lo tanto, se presupone prohibido el acceso a ese API externo.

Una forma de implementar la respuesta a esa consulta previa podría ser agregando el siguiente código al comienzo de tu script PHP:

<?php
/* Permitimos a cualquier origen acceder a este API de manera remota */
header('Access-Control-Allow-Origin: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  /* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
  die();
}

OJO: Este código permite el acceso a tu API desde cualquier URL.


Si deseas restringir el acceso al API a un reducido número de URLs entonces deberías hacer algo como lo siguiente:

<?php
/* Listado de URLs (orígenes) que tienen acceso al API (sin / al final) */
$autorizados = [
  'http://www.origen1.com',
  'https://www.origen2.es',
];
/* Comprobamos que el origen esté en el listado de orígenes permitidos */
if (
  isset($_SERVER['HTTP_ORIGIN'])
  && in_array($_SERVER['HTTP_ORIGIN'], $autorizados) === true
) {
  /* Sólo autorizamos el origen validado */
  header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  /* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
  die();
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *