Error sending ajax request

Question

I am making a registration via ajax, and I am getting the following error: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight.

You don’t register, you follow my codes:

var dataString = $(this).serialize();
                $.ajax({
                    url: "<?= BASE; ?>/modulos/index.php",
                    type: 'POST',
                    cache: false,
                    crossDomain: true,
                    dataType: 'jsonp',
                    data: 'action=enviar_ordens&' + dataString,
                    beforeSend: function (data) {
                        $('.msg_error').html('<div class="alert alert-info">Aguarde estamos enviando seu pedido...</div>');
                        $("#btn_order").attr('disabled', true);
                        $('#btn_order').text("AGUARDE UM MOMENTO...").attr({
                            title: "Aguarde... Enviando pedido!"
                        });
                    },
                    success: function (data) {
                        if (data.code == 'success') {
                            $('.msg_error').html('<div class="alert alert-' + data.code + '">' + data.msg + '</div>');
                            $("#btn_order").attr('disabled', false);
                            $('#btn_order').text("Enviar Pedido").attr({
                                title: "Enviar Pedido"
                            });
                        } else {
                            $('.msg_error').html('<div class="alert alert-' + data.code + '">' + data.msg + '</div>');
                            $("#btn_order").attr('disabled', false);
                            $('#btn_order').text("Enviar Pedido").attr({
                                title: "Enviar Pedido"
                            });
                        }

                    },
                    error: function (data) {
                        console.log(data);
                    }
                });

In my PHP I put this:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

I wonder if there is a simple solution to fix and how I do?

Att,

Alisson

Answer 1

In PHP: /modulos/index.php must change from:

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

To:

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token, X-Requested-With');

For the X-Requested-With is a header generated by jQuery’s Ajax, and as you are probably accessing different domains this header will need to be informed.

---

Additional not directly related to problem solution with CORS

It is worth noting that maybe not even need to pass the headers of Access-Control-*, because I believe that your Ajax and PHP are on the same host, but maybe you have adjusted the BASE wrong way, so if your BASE:

 http://site.com

But you are trying to access the site via

 http://www.site.com

It will already fail, need to configure the Access-Control-*

If this is the problem, how www. and without, then it would be more interesting to set up BASE for www. and prevent users from accessing without www., using .htaccess for this, for example:

RewriteEngine On

# Adiciona www. no prefixo do domínio
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]