Кросдоменный запрос к Api на js — как получить данные?

Question

[dantedelvengo]

Добрый день! Есть такой файл php не сервере для теста, просто что бы отобразить дынные json

header("Content-type: application/json; charset: utf-8");;
$v['id'] ='11'; $v['nn']='22';
echo json_encode($v);

И вот таким образом я пытаюсь послать ему запрос и получить ответ:
1 вариант:

jQuery.ajax({
            url: "http://www.***.com/hyst/acore.php",
            type: "GET",

            contentType: 'application/json; charset=utf-8',
            success: function(resultData) {
                alert(resultData);

            },
            error : function(jqXHR, textStatus, errorThrown) {
			
			alert(textStatus);
            }
        });

Но тут просто выдает ошибку textStatus как error

Пробую 2й вариант вот так:

var request = new XMLHttpRequest();
		request.open('GET', 'http://www.***.com/hyst/acore.php', true);

		request.onload = function() { 
		  if (request.status >= 200 && request.status < 400) {
			var data = JSON.parse(request.responseText);
			alert(data);
		  } else {
			calert('error');
		  }
		};

		request.send();

Здесь же просто ничего не выдает

однако и в первом и во втором варианте если открыть командную строку то видно что запрос проходит и даже есть ответ!

Подскажите что я делаю не правильно? и какой вариант лучше?? вызывать через php запрос я не могу, так как приложение написано на JS и потом собирается в apk через кордову

Comments

[Lynn «Кофеман»]

Не вижу CORS заголовков в ответе. Наверняка об этом написано в консоли

Answer 1

[dantedelvengo]

Разобрался всем спасибо! дело было в том что в файле обработчике (acore.php) не было разрешения
header('Access-Control-Allow-Origin: *');

теперь когда обработчик выглядит так

header('Access-Control-Allow-Origin: *'); 
header("Content-type: application/json; charset: utf-8");;
$v['id'] ='11'; $v['nn']='22';
echo json_encode($v);

если я вызываю его так:

fetch('http://www.****.com/hyst/acore.php')
		  .then(function(response) {
			//alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
			//alert(response.status); // 200

			return response.json();
		   })
		  .then(function(data) {
			alert(data.id); // iliakan
		  })
		  .catch( alert );

то мне приходит ответ и показывается что было записано в id
так же работает и такой вариант

var request = new XMLHttpRequest();
		request.open('GET', 'http://www****.com/hyst/acore.php', false);

		request.onload = function() { 
		  if (request.status >= 200 && request.status < 400) {
			var data = JSON.parse(request.responseText);
			alert(data.id);
		  } else {
			alert('error');
		  }
		};

		request.send()

рад что наконец получился простейший рабочий вариант api, теперь я могу уже начать работать над проверкой данных, работой с БД и пр. Надеюсь этот пример поможет ещё кому нибудь)

Answer 2

[nvdfxx]

fetch лучший вариант, а не XMLHttpRequest'ы

Comments

[dantedelvengo]

Вот так попробовал

fetch('http://www.***.com/hyst/acore.php')
		  .then(function(response) {
			alert(response.headers.get('application/json; charset=utf-8')); charset=utf-8
			alert(response.status); // 200

			return response.json();
		   })
		  .then(function(data) {
			alert(data.id); // iliakan
		  })
		  .catch( alert );

но к сожалению теперь выдает TypeError: NetworkError when attempting to fetch resource по моему это какая то ошибка доступа ограничение чего то?

Answer 3

[Михаил]

Скорее всего, запрос не успевает пройти, потому в responseText не попадает полезная нагрузка. Варианты решения:

1) плохой -

request.open('GET', 'http://www.omi.kz/hyst/acore.php', true);

заменить true на false, чтобы запрос выполнялся синхронно

2) хороший - использовать промисы или async/await в запросе

3) костыль - обернуть обработку ответа в setTimeout, чтобы дать коду дождаться ответа, а потом продолжать

setInterval(function() {
var data = JSON.parse(request.responseText);
      alert(data);
}, 1000)

Comments

[dantedelvengo]

я в этом новичок пока что но если поставить false то ничего не работает и консоль выдает ошибку NetworkError: A network error occurred.

может там какие то ограничения сам хостинг сайта накладывает??