Как разрешить совместное использование ресурсов на XAMPP?

Question

У меня есть html-файл на моем localhost с формой и jquery/ajax, который обрабатывает данные сообщения. Простой PHP скрипт просматривает данные в таблице базы данных MySQL

Это основная часть:

// $.post('lookup_update.php', $(this).serialize()) //<- local part which works 
    $.post('http://www.example.com/projectX/lookup_update.php', $(this).serialize()).done(function (data) 
          { etc. 

Но когда я указываю на онлайн lookup_update.php я получаю следующее сообщение об ошибке в хроме

XMLHttpRequest не может загрузить http://www.example.com/projectX/lookup_update.php. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Следовательно, исходный «http://localhost» не допускается. Ответ был HTTP код статуса 404.

Как я понимаю, мне нужно использовать

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

для PHP. Но когда я добавляю это в example.com/lookup_update.php, файл дает 404, когда файл localhost пытается его вызвать.

Я также попытался добавить следующее к моей XAMPP Apache конфигурационный файл

Header set Access-Control-Allow-Origin "*" 

Как правильно включить кросс-происхождения ресурс из моей локальной установки XAMPP ??

[EDIT] Это моя простая форма на моем локальном хосте

<!--Begin form--> 
    <div id="form" class="result"> 
     <form method="post" id="reg-form" class="form-horizontal"> 
      <div class="controls"> 
       <input type="text" name="code" id="code" placeholder="Code" class="form-control input-lg" />  
      </div> 
     </form> 
    </div> 
    <!--End form--> 

С помощью следующей формы кода JQuery

<script type="text/javascript"> 
      $(document).ready(function() 
      { 
       $(document).on('submit', '#reg-form', function() 
       { 
        var tmpCode = $("#code").val(); 

//     $.post('lookup_update.php', $(this).serialize()) 
         $.post('http://www.example.com/projectX/lookup_update.php', $(this).serialize()) 
          .done(function (data) 
          { 

           $("#reg-form").fadeOut('slow', function() 
           { 
            $(".result").fadeIn('slow', function() 
            { 
             console.log("inner test " + tmpCode); 
             $(".result").html(data); 


             setTimeout(function() { 
              location.reload(); 
              $('input').val(""); 
             }, 3000); 


            }); 
           }); 
          }) 
          .fail(function() 
          { 
           alert('fail to submit the data'); 
          }); 
        return false; 
       }); 


      }); 

     </script> 

[EDIT 2]

OK, я не думаю, что это связано с онлайн-файлом lookup_update.php, так как я я ИНГ это проверить в другом файле

  var testXHR = $.post("http://www.example.com/projectX/lookup_update.php", function (data) { 
      alert("success:" + data); 
     }) 

И в предупредительного всплывающем окне я вижу ожидаемые данные

Answer 1

Вы должны написать ниже код в начале вашего lookup_update.php

header('Access-Control-Allow-Origin: *'); 
header('Content-type: application/json'); 

Вместо * вы можете написать только адрес Ip.

ИЛИ

Сначала вы должны проверить, где проблема либо на локальном хосте или другом сервере.

Попробуйте этот код: Если вы получаете некоторые данные в оповещении, тогда проблема находится на localhost else на другом сервере.

$.post("test.php", function(data) { 
alert("Data Loaded: " + data); 
}); 

Answer 2

CORS запросы "закреплены" с предполетной запросов.

MDN говорит об этом here

Кроме того, для методов запроса HTTP, которые могут вызвать побочные эффекты на пользовательских данных (в частности, для других, чем GET, или для использования POST с определенными типами MIME методов HTTP) , спецификация требует, чтобы браузеры «предваряли» запрос, запрашивали поддерживаемые методы с сервера с помощью метода запросов HTTP OPTIONS, а затем после «утверждения» с сервера отправляли фактический запрос с использованием метода HTTP-запроса

Это только предположение, но вы, вероятно, используя фреймворк, и вы забыли включить (реализовать) маршрут OPTIONS для ваших запросов.

Стоит отметить, что вы не должны использовать заголовок подстановки (позволяющий любому сайту использовать CORS), вы должны указать белый список.

Другим заголовком, который вы должны отправлять, является метод запроса.

Access-Control-Request-Method: POST 

Надеюсь, это поможет.