title: How do I enable cross-origin resource sharing on XAMPP?
body: <p>I have a html file on my localhost with a form and jquery/ajax which handles the post data. A simple php script looks up the data in a mysql database table </p>
  
  <p>This is the main part:</p>
  
  <pre><code>// $.post('lookup_update.php', $(this).serialize()) //&lt;- local part which works
     $.post('http://www.example.com/projectX/lookup_update.php', $(this).serialize()).done(function (data)
                              { etc.
  </code></pre>
  
  <p>But when I point to the online lookup_update.php I get the following error message in chrome</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://www.example.com/projectX/lookup_update.php" rel="noreferrer">http://www.example.com/projectX/lookup_update.php</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost" rel="noreferrer">http://localhost</a>' is therefore not allowed access. The response had HTTP status code 404.</p>
  </blockquote>
  
  <p>As I understand it I need to use </p>
  
  <pre><code> header("Access-Control-Allow-Origin: *");
  </code></pre>
  
  <p>for php. But when I add this to example.com/lookup_update.php, the file gives a 404 when the localhost file tries to call it.</p>
  
  <p>I also tried to add the following to my Xampp apache config file</p>
  
  <pre><code>Header set Access-Control-Allow-Origin "*"
  </code></pre>
  
  <p>How do I correctly enable cross-origin resource from my local XAMPP setup??</p>
  
  <p>[<strong>EDIT</strong>]
  This is my simple form on my localhost</p>
  
  <pre><code>&lt;!--Begin form--&gt;
      &lt;div id="form" class="result"&gt;
          &lt;form method="post" id="reg-form"  class="form-horizontal"&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" name="code" id="code" placeholder="Code"  class="form-control input-lg" /&gt;      
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;!--End form--&gt;
  </code></pre>
  
  <p>With the following form jquery code</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
              $(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;
                  });
  
  
              });
  
          &lt;/script&gt;
  </code></pre>
  
  <p>[<strong>EDIT 2</strong>]</p>
  
  <p>OK, i don't think it has to do with the online lookup_update.php file, as I am using this to test in another file</p>
  
  <pre><code>            var testXHR = $.post("http://www.example.com/projectX/lookup_update.php", function (data) {
              alert("success:" + data);
          })
  </code></pre>
  
  <p>And in the alert popup window I see the expected data</p>