AJAX (jQuery) to PHP, 'Access-Control-Allow-Origin' header contains multiple values ', *', but only one is allowed

Question

So I got this page which loads a bunch of data so I'm using an infinite scroll. The client side html uses jQuery to do an AJAX request to a PHP file on the server.

The page is on a different domain than the server, which is why access-control-headers / allow-origin is needed.

I tested it without and it indeed gives the following error:

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

Now, when I add the headers in the PHP file, I get this:

Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'domain, *', but only one is allowed. Origin 'domain' is therefore not allowed access.

Server-side PHP:

header('Access-Control-Allow-Origin: https://di.community');
header('Access-Control-Allow-Headers: X-Requested-With');    
$start = $_GET['start'];
echo json_encode(array_slice($tokenData, $start, 500));

Client side:

$.ajax({
    if (working == false) {
        working = true;
        type: "GET",
        url: "serverdomain/data.php?start="+start,
        processData: false,
        contentType: "application/json",
        data: '',
        success: function(r) {
            r = JSON.parse(r)
            start += 500;
            setTimeout(function() {
                working = false;
            }, 100)
        },
        error: function(r) {
            console.log("Something went wrong!");
        }
    }
});

I have edited out the client domain name to "domain". I only want that specific domain to be able to have access, which is why I'm not using *. I've edited out the server domain to "serverdomain".

So yeah, this AJAX fires whenever a user scrolls to the bottom of the page, which works. But for some reason when I add the headers it thinks I set multiple values for the Allow-Origin header. Again, the only difference between the two errors is adding the following to the php script:

header('Access-Control-Allow-Origin: https://di.community');
header('Access-Control-Allow-Headers: X-Requested-With');

If anyone could point me into the direction of why this could be happening, I'd be very grateful :P.

Edit: I checked the possible duplicate. It's not the same question, but the top answer to it suggested using .htaccess to get the wanted result, which led me to check the .htaccess to see if it has something to do with my multiple values error and it did. :) fixed now, thanks Nico

score 0 · Accepted Answer · answered May 18 '18 at 12:53

Thanks to Nico Haase's comment I looked into the .htaccess which has the following lines:

<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Which explains the error. Removing this wouldn't be wise, it's wordpress related and I feel like I might break some things that need this.

So what I did now is set this in the PHP:

header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
header('Access-Control-Content-Type: application/json');

Which triggers the thing in .htaccess to add the Allow-Origin header.

It works now! Dumb me not thinking of .htaccess having something to do with this.

AJAX (jQuery) to PHP, 'Access-Control-Allow-Origin' header contains multiple values ', *', but only one is allowed

1 Answers1