Laravel Frontend To Django Backend X-csrf-token Not Allowed In Preflight Response

I have Laravel framework with VueJS serving as the frontend. This frontend is hosted on xampp's localserver on ports 80,443 with the configured url "". I send API requests from VueJS app using axios to a Django backend, where I have installed a working Rest framework (Accessible through Postman). The backend server is Because the servers are different, I have installed django-cors-headers package and configured the file to include this package, and also include the middleware, as shown in the documentation.

This is the axios request from Vue:

let url = "http://localhost:8000/leadmanager/api/lead/";
    .then(res => console.log(
    .catch(error => console.log(error));

Initially I got this error:

Access to XMLHttpRequest at 'http://localhost:8000/leadmanager/api/lead/' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So I checked the documentation and installed django-cors-headers and included the Laravel website's url inside CORS_ORIGIN_WHITELIST.


After doing this, I get a different error. I suspected this would be because Laravel by default attaches x-csrf-token headers to the packets being sent out.

Access to XMLHttpRequest at 'http://localhost:8000/leadmanager/api/lead/' from origin '' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

To allow requests with x-csrf-tokens, I tried the following settings for django-cors-headers in



So how do I configure Django's backend to allow requests from Laravel attached with x-csrf-headers? I want to do this without having to modify Laravel's settings to not attach these headers since they are a security feature implemented by Laravel to mitigate CSRF attacks.



After referring to pointed out by @bak2trak, I checked the request headers being sent out by the Laravel application from the Chrome Developer Console (Network tab), the request headers were "x-csrf-token and x-requested-with". So I modified CORS_ALLOW_HEADERS to add the "x-requested-with" header.


It gave a different error, 401 [Unauthorized], so I removed the default authentication classes of the REST_FRAMEWORK.

Now the requests can finally pass through and I get the appropriate response from Django backend for my Laravel's GET requests.