I solved the problem - Nginx server configuration. He was the one who added multiple values to header
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!
Please or to participate in this conversation.