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.
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.
- → Django, code inside <script> tag doesn't work in a template
- → Uncaught ReferenceError: Parent is not defined
- → React - Django webpack config with dynamic 'output'
- → Put a Rendered Django Template in Json along with some other items
- → Implement shopify templates in django
- → Python Shopify API output formatted datetime string in django template
- → How to avoid being crawled/penalized by Google
- → Django: Identify the urls that provide duplicate content and set a canonical link
- → Shopify app: adding a new shipping address via webhook
- → Jquery Modal Confirmation on Django form submit for deletion of object
- → changing the size of an image with css
- → shopify_auth multi store session handling
- → How to use Shopify Python API RecurringApplicationCharge