Laravel frontend to Django backend x-csrf-token not allowed in preflight response

Question

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.

Have you put django.middleware.csrf.CsrfViewMiddleware in your middlewares ? — bak2trak
– bak2trak, Commented Jun 18, 2019 at 9:30
Yes, I have put that as a middleware as per the documentation for django-cors-headers. The order of middleware is Cors, Common, Csrf — Tribunal
– Tribunal, Commented Jun 18, 2019 at 9:32
Take a look at this comment stackoverflow.com/a/38842030/6682340 — Krukas
– Krukas, Commented Jun 18, 2019 at 9:35
@Krukas I included just the host name test.net inside CSRF_TRUSTED_ORIGIN as the comment specified but nothing changed. — Tribunal
– Tribunal, Commented Jun 18, 2019 at 9:39

Tribunal · Accepted Answer · 2019-06-18 10:28:25Z

1

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.

answered Jun 18, 2019 at 10:28

Tribunal

1306 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel frontend to Django backend x-csrf-token not allowed in preflight response

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related