I am creating a web page that call remote data(json). for that i used jQuery.ajax it is good when i am calling the page in same domain. But if I call this from another domain (like: localhost) browser is blocking by saying
No 'Access-Control-Allow-Origin' header is present on the requested resource
but If I use dataType: 'JSONP' with ajax then browser is not blocking but getting this following error though it is a valid json object:
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)
This is my ajax code:
$(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' // <----
});
});
And json is like this:
{
"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"
}, {}...
You can't just use JSONP, it has to be supported by the server. JSONP is a hack where the server wraps your JSON data in a javascript function (the callback). When jQuery received it, it evaluates it and tries to run the function. If the server you're calling doesn't do the wrapping, it won't work. Hence the token errors.
If you have control over the server you can either implement JSONP support or provide proper cross domain support for your AJAX calls. This is commonly referred to as CORS (cross origin resource sharing).
You can make your CORS settings more permissive by modifying your access policies. There are plenty of tutorials on how to do this with virtually any web server as well as in virtually any language.
To use JSONP you need to use both JavaScript and server side callback function. callback=? value must be given in addition to the client side Client :
$.ajax({
type:"GET",
dataType:"jsonp",
url:"example.php",
data: "callback=?",
success: function (result) {
// do something
}
});
Server :
function example()
{
// do something and return as follows
$value = json_encode($value);
echo $_GET['callback'] . '(' . $value. ')';
}