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
This is the main part:
// $.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.But when I point to the online lookup_update.php I get the following error message in chrome
XMLHttpRequest cannot load http://www.example.com/projectX/lookup_update.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404.
As I understand it I need to use
header("Access-Control-Allow-Origin: *");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.
I also tried to add the following to my Xampp apache config file
Header set Access-Control-Allow-Origin "*"How do I correctly enable cross-origin resource from my local XAMPP setup??
[EDIT]This is my simple form on my localhost
<!--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-->With the following form jquery code
<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, 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
var testXHR = $.post("http://www.example.com/projectX/lookup_update.php", function (data) { alert("success:"+ data); })And in the alert popup window I see the expected data