Axios issue with request but it works in a basic get

Get Help
#1

Hello,

I’m trying to get ‘sanctum/csrf-cookie’ from the backend (Laravel/Sanctum) but I’m having some CORS issues with my code.

I created an instance of Axios as:

import axios from "axios"
let instance = axios.create({
   withCredentials: true,
   crossDomain: true,
   baseURL : 'https://api.test.sc:8890/'
});

instance.interceptors.request.use(function(request) {
    request.headers.common['Accept'] = 'application/json'
    request.headers.common['Content-Type'] = 'application/json'
    request.headers.common['Access-Control-Allow-Origin'] = 'https://www.test.sc:8890' // REQUIRED!
    return request
})
instance.interceptors.response.use(
    response => {return response},
    error => {return Promise.reject(error)}
)

export default instance;

Then I use it for my get:

return api.get("sanctum/csfr-cookie");

The error returned is:

‘… has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.It does not have HTTP ok status’
it returns:

{data: '', status: 204, statusText: 'No Content',...}

What is wrong in my interceptor? Why simple axios.get works?

#2

In your config/cors.php do you have supports_credentials set to true?

#3

Hi @Deano, thanks for help.

Yes, I do. I did two tests: header('Access-Control-Allow-Credentials: true'); or 'supports_credentials' => true, and both of them are confirmed.

The strange is the request page returns 204 and the cookie if I test it by curl or postman or if I use the simple axios.get().

The issue occurred using the axios interceptor.