Не удается выполнить AJAX-вызов на локальный веб-сервер из приложения HTML5 - PullRequest
Новая
       10

Не удается выполнить AJAX-вызов на локальный веб-сервер из приложения HTML5

3 голосов
/ 03 ноября 2011

Я пытаюсь сделать простой AJAX-запрос из приложения HTML5 на локальный веб-сервер. Однако, поскольку код клиента не был получен с веб-сервера, я получаю Ошибка «Нулевой источник не разрешен Access-Control-Allow-Origin».

Я перепробовал все, что описано в следующем посте, но все еще не работает: Ошибка XmlHttpRequest: нулевой источник не разрешен Access-Control-Allow-Origin

Если я размещаю код своего сервера на сервере, размещенном в Интернете, клиентское приложение работает. Но я бы хотел, чтобы он работал с моим локальным сервером MAMP, который работает на том же ноутбуке.

1) На локальном веб-сервере я добавил в свой контроллер PHP следующее: 

header('Access-Control-Allow-Origin: *');

2) Вот мое клиентское приложение HTML5. JSONP не требуется, поскольку сервер поддерживает CORS. 

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    <base href='http://192.168.15.12/'></base> <!-- local MAMP server -->     
    <script>

        $(document).ready(function() {
                $('#leadButton').click(function(){

                    $.getJSON(
                        'get/leaderboard',
                        function(data){
                            var leader;

                            leader = "<div> The top leader is from local webserver is: " +  data[0].name + "</div>";
                            $('#leaderboard').append(leader);
                            console.log(data);
                        }
                    );     
                });
        });
    </script>
</head>

<body>
    <div id="leaderboard">Leaderboard
        <button id="leadButton">Get Leaderboard</button>
    </div>
</body>

3) Когда я вызываю клиентское приложение (файл: ///Users/John/Desktop/index.html) из Chrome и нажимаю кнопку "leadButton", вот результирующие заголовки запроса / ответа: 

Request URL:http://192.168.15.12/get/leaderboard
Request Method:OPTIONS
Status Code:403 Forbidden

Request Headers
Access-Control-Request-Headers:Origin, X-Requested-With, Accept
Access-Control-Request-Method:GET
Origin:null

Response Headers
Connection:Keep-Alive
Content-Length:227
Content-Type:text/html; charset=iso-8859-1
Date:Thu, 03 Nov 2011 19:03:27 GMT
Keep-Alive:timeout=5, max=100
Server:Apache

Чего мне не хватает? Спасибо за вашу помощь.

Ответы [ 2 ]

4 голосов
/ 03 ноября 2011

Я нашел проблему:

Для запроса к локальному веб-серверу (192.168.15.12) требуется полный URL-адрес, указанный в запросе $ .getJSON: "http://192.168.15.12/get/leaderboard"

Тег "base" не добавлял "http://192.168.15.12/" к URL в вызове jQuery.

Мне также нужно было добавить следующую конфигурацию Apache в мой файл .htaccess, чтобы включить перекрестный общий доступ к ресурсам (CORS) (выполнение этого в PHP не работало надежно): 

 Header set Access-Control-Allow-Origin *
0 голосов
/ 03 ноября 2011

экранный: 

file:///Users/John/Desktop/index.html

не будет работать. Поскольку file: /// не совпадает с localhost.

Вам нужно получить доступ http://192.168.15.12/index.html, чтобы это работало

...