Blog webdeveloperski Patryk yarpo Jar

Ajax z Access-Control-Allow-Origin

Autor wiadomości Maj 6, 2011

Choć Ajax w "czystej postaci" nie pozwala na odwoływanie się do zdalnych zasobów (podany adres musi należeć do tej samej domeny, co strona, na którym odpalany jest skrypt). Można jednak to obejść, stosując po stronie serwera odpowiedni nagłówek (`Access-Control-Allow-Origin'). Poniższy kod na pewno działa w FF. Nie testowałem w innych przeglądarkach.

Kod strony

Oto pełny kod strony tradycyjnego Ajaksa:

<html>
<head>
    <title>Przykład Ajax - zdalny serwer 1</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function testAjax()
    {
        var oClient = new XMLHttpRequest();
        oClient.open('POST', 'http://yarpo.pl/download/examples/plik.txt'); // 1
        oClient.onreadystatechange = function()
        {
            if (4 === this.readyState && 200 === this.status)
            {
                document.getElementById('response').innerHTML = this.responseText;
            }
        }
        oClient.send(null);
    }
    </script>
</head>
<body>
    <button onclick="testAjax()">test</button>
    <div id="response"></div>
</body></html>

W linii "1" wysyłamy request metodą "POST" do pliku 'http://yarpo.pl/download/examples/plik.txt'. Plik ten zawiera napis "działa". Zakładam, że skrypt odpalany jest na innej domenie niż "yarpo.pl".

Po uruchomieniu tego przykładu otrzymamy błąd "405 Method Not Allowed".

Zmieńmy zatem metodę na GET.

Metoda GET

Tym razem nie pokazuje się błąd 405. W Firebugu wygląda nawet na to, że wszystko jest ok. Jednak skrypt nie działa jak tego oczekujemy.

Aby zaczął dziać musimy ustawić odpowiedni nagłówek po stronie serwera. W tym celu przygotowałem odpowiedni skrypt PHP.

Access-Control-Allow-Origin

<?php
// zakładam, że odpalasz to na domenie localhost
header('Access-Control-Allow-Origin: http://localhost');
echo 'działa';

Taki kod znajduje się w pliku 'http://yarpo.pl/download/examples/plik.php'.

W skrypcie JavaScript należy zmienić jeszcze źródło:

... bez zmian
oClient.open('GET', 'http://yarpo.pl/download/examples/plik.php');
... bez zmian

Po takich zmianach, można już odbierać dane z serwera w innej domenie.

Warto przeczytać:

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.