Home / Questions / 189223
Accepted
Caruso
Asked: 2020-08-17 03:16:09 +0800 CST 2020-08-17 03:16:09 +0800 CST

"CORS" issue using AJAX and PHP

  • 772

I have this JQUERY code:

$(document).ready(function() {
listarDetalle();

});
function listarDetalle(){
     var accion="listar";
       var URLprotocol = window.location.protocol;
    $.ajax({
     
            type: "POST",
            url: URLprotocol+"//gestionweb/includes/php/procesoDetalle.php",
            data: { "accion":accion}, 
            dataType:'json',
        
            error: function(){
                alert("error petición ajax");
               
            },
            
            success: function(data){
                console.log(data);
             
                                   
               for (var i = 0; i < data.length; i++) {
        
                var newRow =
                    "<tr>" +
                    "<td>" + data[i].idp + "</td>" +
                    "<td>" + data[i].nombre + "</td>" 
                    "<td>" + data[i].marca + "</td>" +
                    "<td>" + data[i].cantidad + "</td>" +
                    "<td><input type='radio' id='"+data[i].idproducto+"' name='seleccion'/></td>"+
                    "</tr>";
                $(newRow).appendTo("#ticket tbody");                 
       
    
               
            
        
  

        } }
        
}).fail( function( jqXHR, textStatus, errorThrown ) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');
  

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

});;

};

And I get this error:

Blocked Cross-Origin Request: The Same-Origin Policy does not allow reading the remote resource at http://gestionweb/includes/php/procesoDetalle.php . (Reason: CORS request was rejected.)

Try with:

dataType:'jsonp',

That I found on a website, but if I do that it tells me that the script load failed. I really don't know what to do. I enclose images of google chrome of the headers... the address appears well, let's say it is:

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

enter image description here

enter image description here

As you can see, it gives the error 302 in DetailProcess.php as the resource was moved but I don't understand.

I call it from another script and all good

cors

1 Answers

  1. Best Answer

    To begin with, I must tell you that this line is unnecessary:

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

    If you want to keep the schema ( http:or https:) just do not indicate it:

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

    On the other hand, CORS (also known as cross-origin resource sharing ) rules prevent you from accessing resources from an external page if the external page does not authorize your website to do so.

    By default, all queries within the same origin (same URL or Same Origin Policy ) are assumed safe and do not use CORS for validation, only queries to external origins (or URLs).

    To do this, the browser performs a previous query (preflight request) using the HTTP methodOPTIONS .

    It is precisely that previous query that has failed you and, therefore, access to that external API is presumed prohibited.

    One way to implement the response to that previous query could be by adding the following code to the beginning of your PHP script:

    <?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();
}

    NOTE : This code allows access to your API from any URL .

    If you want to restrict API access to a small number of URLs then you should do something like the following:

    <?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();
}
    • 2