Classic cross domain ajax with jquery client side PHP server side

Question

It is about a javascript pixel to follow up who does what in a sales funnel on the web.

I have a javascript script on my customer thrivecart domain (e.g. https://ownspace.thrivecart.com)

I want to make a request to another domain (e.g. https://emails.mycustomer.com) from which the javascript script is from.

Here is the main part of the javacsript code on https://ownspace.thrivecart.com :

$(document).ready(function () {
            console.log("loading pixel");
            $.ajax({
                url: 'https://emails.mycustomer.com/server_side_script.php',
                type: 'POST',
                headers: {  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                            'X-Requested-With': 'XMLHttpRequest'},
                data: {my:ciphered_get_parameters},
                success: function (result) {
                    console.log(result);
                }
            });
        });

Here is what I have server side for the moment : (server_side_script.php)

<?php
header('Content-Type:application/json'); 
header("Access-Control-Allow-Origin:https://ownspace.thrivecart.com");
header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Accept");
// Special data treatment

I get this error on the thrivecart page :

Failed to load https://emails.mycustomer.com/server_side_script.php: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

However, I read that " Access-Control-Allow-Headers : Indicates which headers are supported by the response’s url for the purposes of the CORS protocol."

As the header is on in the PHP code, I don't understand why it does not work.

I even tried to set the X-Requested-With header in the response with NGINX conf file, restarting the server.

But, I think I miss a point.

See if this helps: https://stackoverflow.com/a/9866124/1175966. In chrome dev tools network inspect the actual OPTIONS request and see what headers actually are included — charlietfl, Jan 30 '18 at 17:59
Nothing I have not read about before asking and I don't think it is a typo. — Mantisse, Jan 30 '18 at 18:02
So what do you see when you inspect the actual OPTIONS request response headers in chrome? — charlietfl, Jan 30 '18 at 18:05
I did not change anything to my code, so, problem not solved. I am going to work on it, thanks. — Mantisse, Jan 30 '18 at 18:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164196/discussion-between-mantisse-and-charlietfl). — Mantisse, Jan 30 '18 at 18:13

score 1 · Accepted Answer · answered Jan 30 '18 at 18:37

1

Appears to be a typo in

header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Accept");

Try

header("Access-Control-Allow-Headers:Content-Type, Authorization, X-Requested-With, Accept");

answered Jan 30 '18 at 18:37

charlietfl

170,828
13
121
150

Classic cross domain ajax with jquery client side PHP server side

1 Answers1