Estoy creando una página web que llama a datos remotos (json). para eso usé jQuery.ajax, es bueno cuando llamo a la página en el mismo dominio. Pero si llamo a esto desde otro dominio (como: localhost), el navegador se bloquea diciendo
No hay encabezado 'Access-Control-Allow-Origin' en el recurso solicitado
pero si uso dataType: 'JSONP' con ajax, entonces el navegador no se bloquea, pero recibe el siguiente error aunque es un objeto json válido:
Uncaught SyntaxError: Unexpected token : at p (jquery.min.js:2) at Function.globalEval (jquery.min.js:2) at text script (jquery.min.js:4) at Nb (jquery.min.js:4) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js:4)Este es mi código ajax:
$(function () { $.ajax({ url: "/GarmentTech/api/get_products.php", type: "GET", success: function (result) { $('.text').text(''); console.log(result); console.log(result); for (var i = 0; i < result.products.length; i++) { var place = ` <tr> <td>${result.products[i].name}</td> <td>${result.products[i].description}</td> <!--<td>${result.products[i].type}</td>--> <td>${result.products[i].model_color}</td> <td>${result.products[i].size}</td> <!--<td>${result.products[i].manufacturer}</td>--> <td>${result.products[i].purchase_rate}</td> <td>${result.products[i].sales_rate}</td> <td style="text-align:right;"> ${result.products[i].stock_count} ${result.products[i].unit_type} </td> </tr> `; $('.product_view').append(place); } }, dataType: 'JSONP' // <---- }); });Y json es así:
{ "status": "ok", //<---- (chrome is saying problem is hare) "count": 26, "count_total": 26, "pages": 1, "products": [ { "size": "16X18", "id": 41, "name": 86416, "cost_price": 1200, "sales_rate": 1300, "description": "", "remarks": "", "batch_no": "NA" }, {}...No puede simplemente usar JSONP, debe ser compatible con el servidor. JSONP es un truco en el que el servidor envuelve sus datos JSON en una función javascript (la devolución de llamada). Cuando jQuery lo recibe, lo evalúa e intenta ejecutar la función. Si el servidor al que está llamando no hace el ajuste, no funcionará. De ahí los errores de token.
Si tiene control sobre el servidor, puede implementar la compatibilidad con JSONP o proporcionar la compatibilidad adecuada entre dominios para sus llamadas AJAX. Esto se conoce comúnmente como CORS (intercambio de recursos de origen cruzado).
Puede hacer que su configuración de CORS sea más permisiva modificando sus políticas de acceso. Hay muchos tutoriales sobre cómo hacer esto con prácticamente cualquier servidor web y en prácticamente cualquier idioma.
Para usar JSONP, debe usar JavaScript y la función de devolución de llamada del lado del servidor. devolución de llamada =? el valor se debe dar además del lado del cliente Cliente:
$.ajax({ type:"GET", dataType:"jsonp", url:"example.php", data: "callback=?", success: function (result) { // do something } });servidor:
function example() { // do something and return as follows $value = json_encode($value); echo $_GET['callback'] . '(' . $value. ')'; }