Ajax get request succeds on localhost but fails online - json

Question

I'm try to get data via an ajax get request in Wordpress and I wrote a script in javascript and another in php to handle it.
The code for javascript is the following:
window.loadServices = function loadServices(){
var data = {
action: 'get_services',
perpage: '6',
};
$.ajax({
type: 'GET',
url: sendbooking.ajaxurl,
data: data,
dataType: 'json',
success: function (response) {
post = response.data;
console.log(response);
$.each(post, function(){
elem = $(this)[0];
media = elem._links['wp:featuredmedia']
var media_href;
$.each(media, function(){
media_href = $(this)[0].href;
})
// console.log(elem);
var image;
$.ajax({
type: 'GET',
url: media_href,
dataType: 'JSON',
success: function(data){
image = data.source_url;
},
async: false,
})
$('.services .elements .elements-container').append(
$('<div />', {
class: 'loader',
}).append(
$('<img />', {
src: '/wp-content/themes/farmhouse/assets/images/loader.gif'
})
)
)
setTimeout(function(){
$('.loader').fadeOut();
}, 2000);
$('.services .elements .elements-container').append(
$('<div />', {
class: 'element '+elem.type,
}).append(
$('<a />', {
href: elem.link
}).append(
$('<div />', {
class: 'element-image',
}).append(
$('<img />', {
src: image,
})
)
)
).append(
$('<h5 />', {
class: 'element-title',
}).append(
$('<a />', {
href: elem.link,
text: elem.title.rendered
})
)
)
)
setTimeout(function(){
$('.loader').remove();
}, 2000);
})
},
});
}
This is instead the code for php:
if(!function_exists('get_services')):
function get_services(){
$data = $_GET;
$json_feed = get_site_url() . '/wp-json/wp/v2/service?per_page='.$data['perpage'];
$json = file_get_contents($json_feed);
$json_decoded = json_decode($json);
wp_send_json_success($json_decoded);
}
add_action('wp_ajax_get_services', 'get_services');
add_action('wp_ajax_nopriv_get_services', 'get_services');
endif;
The problem I'm having is that on localhost, this works fine, I get the content I need, without any problem. When I'm going to deploy the site on line, the ajax doesn't retrieve anything. Throwing console.logs, I noticed that the scripts fail when getting data from the api url (file_get_contents), but if you go there directly via browser's address bar, or through postman, data are served correctly. (You can test: http://www.dsoftwarelab.it/ilpiastrino/wp-json/wp/v2/service?per_page=6).
I really don't know how to solve it, since I've really tried everything.

Answer 1

Case 1 : You don't have access rights on server.
If you have root access, edit php.ini, usually located at /etc/php.ini.
If you dont have root access, try to add ini_set('allow_url_fopen', 'On'); or ini_set('allow_url_fopen', '1');.
If you can't see php.ini, try using phpinfo() in a PHP script to find the php.ini location.
Case 2 : You have miss the SSL parameter in .
$url= 'https://example.com';
$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
$response = file_get_contents($url, false, stream_context_create($arrContextOptions));
Case 3 : 403 FORBIDDEN
The server responds with an "403 FORBIDDEN" status code. So file_get_contents() works fine, but the server you are trying to access (or a proxy or something in between) dont allow it.

Answer 2

Do not convert json to array. comment this line $json_decoded = json_decode($json);
if(!function_exists('get_services')):
function get_services(){
$data = $_GET;
$json_feed = get_site_url() . '/wp-json/wp/v2/service?per_page='.$data['perpage'];
$json = file_get_contents($json_feed);
//dont need this line
//$json_decoded = json_decode($json);
wp_send_json_success($json);
}
add_action('wp_ajax_get_services', 'get_services');
add_action('wp_ajax_nopriv_get_services', 'get_services');
endif;