How to enable Cross-origin resource sharing on XAMPP?

Question

I have an html file on my localhost with a form and jquery / ajax that processes post data. Simple php script lookup data in 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 lookup_update.php online, I get the following error message in chrome

XMLHttpRequest cannot load http://www.example.com/projectX/lookup_update.php . The requested resource does not have an Access-Control-Allow-Origin header. Origin ' http: // localhost ' is therefore not allowed. The response was an HTTP 404 status code.

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 404 when the localhost file tries to call it.

I also tried adding the following to the Xampp apache config file

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

How to properly enable cross-generation 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 jquery form 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 this is related to the lookup_update.php online file, as I use this for testing in another file

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

And in the warning popup I see the expected data

Answer 1

You should write below code at the beginning of your lookup_update.php

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

Instead of * you can write only the IP address.

OR

First you need to check where the problem is, on the local host or another server.

Try this code: If you get some data in the message, the problem is on the local host on another server.

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

Answer 2

CORS requests are protected by preflight requests.

MDN talks about it here

In addition, for HTTP request methods that can cause side effects for user data (in particular, for HTTP methods other than GET, or for using POST with certain MIME types), the specification requires browsers to "precede" the request, soliciting supported methods from the server using the HTTP OPTIONS request method, and then, after "approval" from the server, sending the actual request using the HTTP request method

This is just an assumption, but you are probably using the framework, and you forgot to enable (implement) the OPTIONS route for your requests.

It is worth noting that you should not use the substitution header (allowing any site to use CORS your service), you should rather specify a whitelist.

Another header you should send is the request method.

 Access-Control-Request-Method: POST 

Hope this helps.