0

Estoy tratando de hacer un widget en el cual me tiene que traer los datos una lista de productos.

scrip.js

var cssId = 'myCss';
if (!document.getElementById(cssId))
{
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = cssId;
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://sitioweb.com/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://sitioweb.com/datos.php");
xhr.onload = function () {
if (xhr.status == 200) {
    var json = JSON.parse(xhr.responseText);
    var template = "";
    template += '<div id="titulo">Aconcagua Insumos</div>';
    json.map(function(item){
        template += item.nombre + " <span>"+ item.cateId + "</span><br>";
        return template;    
        });
        template += '<div id="foot">Pie de pagina<br><a href="">Aconcagua Insumos</a></div>';   
            document.getElementById("LasnaInsumos_1c3155cceb757fc23f43c7815a1705a3").innerHTML = template;
} else {
    console.log("Error: "+xhr.status);
}
}
xhr.send();

Html

<div class="widget" id="LasnaInsumos_1c3155cceb757fc23f43c7815a1705a3"></div>
<script src="https://sitioweb.com/script.js"></script>

No me trae resultados, solo el estilo y el mensaje de error en la consola es:

Pedido de origen cruzado bloqueado: La política de mismo origen no permite leer el recurso remoto en https://sitioweb.com/datos.php. (Razón: encabezado CORS 'Access-Control-Allow-Origin' faltante).

Como puedo resolverlo? Gracias!

2
  • Lo estas probando en local? Commented el 3 feb. 2019 a las 4:54
  • La página da error 403.
    – user13558
    Commented el 3 feb. 2019 a las 6:30

1 respuesta 1

1

puedes corregirlo enviado xhr.setRequestHeader() con los valores de tu servidor: y te quedaria algo asi debes corregirlos es solo un ejemplo:

var cssId = 'myCss';
if (!document.getElementById(cssId))
{
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = cssId;
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://sitioweb.com/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://sitioweb.com/datos.php");
xhr.setRequestHeader('X-Alt-Referer', 'https://sitioweb.com/');
xhr.setRequestHeader('Host' , 'https://sitioweb.com/');
xhr.setRequestHeader('origin', 'https://sitioweb.com/');
xhr.setRequestHeader('Referer', 'https://sitioweb.com/');
xhr.onload = function () {
if (xhr.status == 200) {
    var json = JSON.parse(xhr.responseText);
    var template = "";
    template += '<div id="titulo">Aconcagua Insumos</div>';
    json.map(function(item){
        template += item.nombre + " <span>"+ item.cateId + "</span><br>";
        return template;    
        });
        template += '<div id="foot">Pie de pagina<br><a href="">Aconcagua Insumos</a></div>';   
            document.getElementById("LasnaInsumos_1c3155cceb757fc23f43c7815a1705a3").innerHTML = template;
} else {
    console.log("Error: "+xhr.status);
}
}
xhr.send();
2
  • ¿Estás seguro? El encabezado Host y el encabezado Origin no se pueden establecer manualmente. Puedes leer en Nombre de encabezado prohibido la lista de los encabezados que no pueden cambiarse mediante programación. Commented el 3 feb. 2019 a las 18:55
  • Gracias Bryro por la respuesta, voy a probarlo, pero ayer justamente buscando encontré que había que poner esto: header('Access-Control-Allow-Origin: *'); al principio del PHP y funciono. Por ahora todas las pruebas son de forma local, voy a ir probando con la web del cliente.
    – user101604
    Commented el 3 feb. 2019 a las 23:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.