CODEWITHSUNDEEP
djangolaravelvue.jsdjango-rest-frameworkdjango-cors-headers
Tribunal
Tribunal

Reputation: 130

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 "http://test.net". 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 http://127.0.0.1:8000. Because the servers are different, I have installed django-cors-headers package and configured the settings.py 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/";
axios.get(url)
    .then(res => console.log(res.data))
    .catch(error => console.log(error));

Initially I got this error:

Access to XMLHttpRequest at 'http://localhost:8000/leadmanager/api/lead/' from origin 'http://test.net' 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. 

CORS_ORIGIN_WHITELIST = [
    "http://test.net"
]

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 'http://test.net' 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 settings.py: 

CORS_ALLOW_HEADERS = [
    'x-csrftoken'
]



CSRF_TRUSTED_ORIGINS = [
    'http://test.net'
]

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.

Upvotes: 2

Views: 2650

Answers (1)

Tribunal
Tribunal

Reputation: 130

After referring to https://stackoverflow.com/a/32501365/10888237 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.

CORS_ALLOW_HEADERS = [
    'x-csrf-token',
    'x-requested-with'
]

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.

Upvotes: 1

Related Questions