How do I enable cross-origin resource sharing on XAMPP?

Question

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

Answer 1

You have to 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 just Ip address.

OR

First you have to check where is problem either on localhost or other server.

Try this code : If you getting some data in alert then problem is on localhost else on other server.

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

Answer 2

If you want to allow CORS in the httpd.conf file this is what worked for me:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization"

Put it below the Listen 80 line in the httpd.conf file.

When I used only Header set Access-Control-Allow-Origin "*", GET requests worked, but POST didn't.

The enviroment it was tested is Windows 10 on Apache server using XAMPP. Apache is hosting a Laravel project.

Answer 3

CORS requests are "secured" with preflight requests.

MDN talks about it here

Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method

This is just a guess here, but you are probably using a framework, and you forgot to enable (implement) OPTIONS route for your requests.

Worth noting, you shouldn't use the wildcard header ( allowing any site to CORS your service ), you should rather specify a whitelist.

Another header that you should be sending is allowed request method.

Access-Control-Request-Method: POST

Hope this helps.