1

Начал знакомиться с XMLHttpRequest/CORS но пока не могу во всем разобраться. Отправляю с локальной хтмл-страницы Аякс-запрос на РНР-файл обработчика на онлайн сервере.

Нашёл простой пример запроса:

<script type="text/javascript">
var request = new XMLHttpRequest();
request.open('POST', 'http://mydomain.com/myphphandler.php', true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send('somekey1=somevalue1&somekey2=somevalue2');
</script>

РНР-обработчик:

<?php
$somevalue1 = $_REQUEST['somekey1'];
$somevalue2 = $_REQUEST['somekey2'];

try {
    // my PDO query
}
catch(PDOException $e) {
    echo $sql.'<br>'.$e->getMessage();
}
$db = null;
?>

Все работает но возникает ряд вопросов:

1. Правильно ли отправляю данные т.е.

request.send('somekey1=somevalue1&somekey2=somevalue2');

или это при GET-запросе а при POST как то иначе отправлять нужно?

2. Дает ли возможность XMLHttpRequest отправлять кроссдоменные запросы без прописания заголовка Access-Control-Allow-Origin на обработчике? И если да и мой запрос является CORS-запросом то почему получаю все равно ошибку

XMLHttpRequest cannot load http://mydomain.com/myphphandler.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Или CORS-заголовок на обработчике в любом случае прописать нужно?

3. Как правильно прописать ответ в РНР-файле обработчика и получать его на странице, с которой отправляю запрос? Если в обработчике добавляю:

echo 'OK';

а в код запроса:

console.log(request.responseText);

то никакого ответа не получаю. Насколько понимаю не получаю status 200

5
  • 1
    Надо чтоб сервер куда вы посылаете запрос отдал заголовок типа access-control-allow-origin:*. Где может быть как звездочка, так и имя домена, с которого будет ожидаться запрос. Просто echo 'OK'; в php не прокатит 30 окт 2015 в 12:50
  • Т.е. получается заголовок на обработчике в любом случае прописать нужно если обработчик на другом домене и сам по себе XMLHttpRequest от этой необходимости не избавляет? Т.е. XMLHttpRequest это лишь альтернатива $.ajax только на чистом JS ?
    – stckvrw
    30 окт 2015 в 12:57
  • На сколько я пробовал, хоть и указание заголовков application/x-www-form-urlencoded является простым и должен избавлять от предзапроса браузером, как пишут в книгах)), но сколько не пытался все равно приходится ждать разрешения от сервера. с другого домена....и как раз таки $.ajax является альтернативой от XMLHttpRequest , а не наоборот, так как $.ajax - это большая сладкая обертка над XMLHttpRequest 30 окт 2015 в 13:04
  • Понял, но ответ от сервера все же не могу получить, даже когда прописал заголовок access-control-allow-origin:* (хотя теперь успешно получаю статус 200). Вы имели в виду что echo 'OK'; не прокатит если заголовок не указать или вообще не прокатит и как то по-другому ответ в обработчике нужно указать?
    – stckvrw
    30 окт 2015 в 13:09
  • То есть сервер, куда вы шлете запрос, теперь отвечает с заголовком access-control-allow-origin:* ? Я имел в виду, что echo 'OK'; не достаточно для разрешения кроссдоменных запросов, конечно же)) без разрешение сервера 30 окт 2015 в 13:20

1 ответ 1

3

Итак. Если у вас и домен, с которого вы посылаете запрос и домен, где обрабатываете запрос под вашим контролем. То есть сервер тоже, то.

Запрос xhr выглядит следующим образом, к примеру.

var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
    var xhr = new XHR();

    var params = "somekey1=somevalue1&somekey2=somevalue2";

    xhr.open('GET', 'http://mydomain2.ru/?' + params, true);

    xhr.onload = function(data) {
        console.log('good');
        console.log( JSON.parse(this.responseText) );
    }

    xhr.onerror = function(data) {
      console.log( 'error' + this.status ); console.log(data);
    }


    xhr.send('fname=Henry&lname=Ford');

Тут я ожидаю json

Обращаю внимание! Если запрос GET то параметры надо передавать в xhr.open вместе с url.

Если запрос POST, то параметры располагаются в xhr.send

Для приема на сервере либо в php файле разрешить, к примеру:

header("Access-Control-Allow-Origin: *");
echo json_encode(['test1' => $_REQUEST['somekey1'], 'test2' => $_REQUEST['somekey2']]);
exit();

либо .htacess должен содержать строки

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, cache-control, if-modified-since"
Header add Access-Control-Allow-Methods "HEAD, GET, POST, OPTIONS"

Лучше выбрать то, что действительно вам подходит.. Например вместо "*" лучше конкретный домен указать.

То, что я сейчас написал - все работает.

2
  • json в обработчике вы указали НЕ в json-формате, должно быть: echo json_encode('{"test1":"$_REQUEST[\'somekey1\']", "test2":"$_REQUEST[\'somekey2\']}');, теперь работает
    – stckvrw
    30 окт 2015 в 14:36
  • @stckvrw я указал массив, который с помощью json_encode преобразуется в json ;-) Просто квадратные скобки массива - синтаксис php 5.4, ;-) для версий ниже надо : echo json_encode(array('test1' => $_REQUEST['somekey1'], 'test2' => $_REQUEST['somekey2'])); Так что все правильно я написал.... , это вам на будущее, чтоб не извращаться с обратными слэшами) 30 окт 2015 в 14:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.