CORS Problems: header contains multiple values, but only one is allowed

Question

I have tried finding a solution for this for a full hour of headache and could not get one step further, so I hope somenone can give me some pointers and save me some more headache:

I have frontend that needs to fetch some data via axios from a backend API. In my backend I have an .htaccess with the following part:

<IfModule mod_headers.c>
        Header set X-Content-Type-Options "nosniff"
        Header set X-XSS-Protection "1; mode=block"
        # Always set these headers for CORS.
        Header always set Access-Control-Max-Age 1728000
        Header always set Access-Control-Allow-Origin: "*"
        Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
        Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$
        Header always set Access-Control-Allow-Credentials true
</IfModule>

So it should allow origins from anywhere. So far so good.

Now, if I make my axios call the headers being sent:

Look like this.

Now in the response header there are TWO access-control-allow-origin, which seems to cause some trouble.

The error I am getting:

Access to XMLHttpRequest at 'http://apidomain.test/api/previews/v1/preview/?id=726&_wpnonce=025ff5c5fa' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', but only one is allowed.

How can I fix this?

- How can I either allow more than one values (would this be bad in any way) – Or how can I prevent this mess with two values in the first place?

Has it to do with axios headers being sent (I once had a trace, where I thought that setting axios header instead of adding one could help, but somehow it lead nowhere).

(I am not doing anything special, just: axios.get('url', withCredentials: true, transformResponse: [some transforms...]).

Please help me out here.

Cheers and thanks in advance.

J

Solution

How can I either allow more than one values (would this be bad in any way)

You can't (browsers just don't support it).

Or how can I prevent this mess with two values in the first place?

Remove one of the two bits of code which are setting the header.

This is one of them:

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

Somewhere you have code which is adding the http://localhost:3000 section.

Remove one of them.

Has it to do with axios headers being sent

Certainly not directly. The other bit of code I mentioned above might act dynamically based on the request headers.

Comments

[Merc]

Hm thanks for the very quick reply. Actually I could onyl imagine it being in here import axios from 'axios' ...(some stuff missing) export default function getPreviewData(backendUrl, previewUrl) { return axios .get(`${backendUrl + previewUrl}`, { withCredentials: true, transformResponse: [].concat( axios.defaults.transformResponse, normalizeWordpress, flattenACF ) }) .then(res => res.data) } but I don't set anything. I will try to dig a bit, but I really would not know where I am doing this...

[Merc]

Also what I don't understand: If I set a wildcard which domains I want to allow, why would it no just accept my localhost:3000 ?

[Quentin]

@Merc — It is very dangerous to fail to an insecure state when given invalid security rules.

[Merc]

Sorry. I don't fully understand. Was this the answer to my second comment?

[Quentin]

@Merc — yes, it was.

[Merc]

Ok. Then I definitely did not understand. So you mean having multiple origin values that is the dangerous thing, because it is invalid? Then again, I think the problem would lie within my backend. So it has nothing to dowith axios. It is just a normal WordPress running, and I would not know where else to search for CORS settings except my .htaccess. Or what are other commmon places to set those kinda things, which could result in two different values?