@dantedelvengo

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

Добрый день! Есть такой файл 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();


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

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

Подскажите что я делаю не правильно? и какой вариант лучше?? вызывать через php запрос я не могу, так как приложение написано на JS и потом собирается в apk через кордову
  • Вопрос задан
  • 557 просмотров
Решения вопроса 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, теперь я могу уже начать работать над проверкой данных, работой с БД и пр. Надеюсь этот пример поможет ещё кому нибудь)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@nvdfxx
Senior Pomidor developer
fetch лучший вариант, а не XMLHttpRequest'ы
Ответ написан
nyakove
@nyakove
Скорее всего, запрос не успевает пройти, потому в 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)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы