Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Sinres's avatar

Header contains multiple values CORS - Laravel API Vue SPA

Hello Guys!

I have some problem with my Vue Spa application on remote hosting which communicates with an rest api - Laravel with Sanctum. In localhost all works fine but in remote hosting I have error:

Access to XMLHttpRequest at 'https://api.domain.com/sanctum/csrf-cookie' from origin 'https://app.domain.com' 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 'https://app.domain.com' *', but only one is allowed.
access-control-allow-origin: https://app.domain.com'
access-control-allow-origin: *

I checked the server configuration and no header is added anywhere - that's weird ...

This is my Vue app headers configuration:

const axios = Axios.create({
    baseURL: 'https://api.domain.com',
    headers: {
        'Access-Control-Allow-Origin': 'https://app.domain.com',
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH",
        "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With",
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
})

And this is my .env from Laravel API

APP_URL=https://api.domain.com
FRONTEND_URL=https://app.domain.com
SESSION_DOMAIN=domain.com
SANCTUM_STATEFUL_DOMAINS=app.domain.com

Locally on my machine of course everything works and only one header is passed in "Access-Control-Allow-Origin", why on remote hosting is multiple? Maybe I can't pass authorization by session in other subdomains?

How can I solve this problem?

Thanks!

0 likes
1 reply
Sinres's avatar

I solved the problem - Nginx server configuration. He was the one who added multiple values to header

Please or to participate in this conversation.