Laravel Passport with Dropzonejs

Question

I am working on a project that has an API layer which is running Laravel Passport. I have added the createFreshApiToken to my application and all of my jQuery ajax requests are working just fine.

Today I am integrating DropzoneJS and when I try to upload a file it is getting a 401 Unauthorized. I checked the request headers and the laravel_token is set in the cookie header.

What would cause Laravel Passport to throw a 401 Unauthorized response when the laravel_token is contained in the request header?

General  
Request URL:http://api.ryno.dev/api/post/photo  
Request Method:POST  
Status Code:401 Unauthorized  
Remote Address:127.0.0.1:80  

Response Headers  
Cache-Control:no-cache  
Connection:Keep-Alive  
Content-Length:28  
Content-Type:application/json  
Date:Wed, 15 Mar 2017 16:36:27 GMT  
Keep-Alive:timeout=5, max=100  
Server:Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.12 PHP/7.0.12   mod_ssl/2.2.31 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9 Perl/v5.24.0  
X-Powered-By:PHP/7.0.12  
X-RateLimit-Limit:60  
X-RateLimit-Remaining:59  


Request Headers  
Accept:application/json  
Accept-Encoding:gzip, deflate  
Accept-Language:en-US,en;q=0.8  
api-version:1  
Cache-Control:no-cache  
Connection:keep-alive  
Content-Length:4802  
Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryEqAfOqBqekRWHC6B  
Cookie:laravel_token=eyJpdiI6InJzRG5SNkVmYW1GMDJmd3pPTUhnWmc9PSIsInZhbHVlIjoiUk1iU01XVm9Ydytyb3NXUDlEVngwUnlGUXNhSkdvcFFpaXhwNSt6XC9XXC9TOHlcL3MxWjl2MkVxU1NCNjV6bmNka2w3dlNlTmJrRXVTVkVhQnZOd1dwZTRpaXdscll1WHVsUm1CMHBkbVdiNVprZXZmT2pRaTdySjRXRzhWY1FGV25JNm5qXC9TNzV6dEJzKzlsclZwRDVMczF6TVduODJIa0s1MVNQSXRMc2dteWtuU1lpdGJUQVJRS3BlS2E5dmd2Vlg2QXJzMldHQUM2Uk15RldUWnF4bXlcL1AzNTgwc1Q3YWpTVWIyVHYrYjN5QllzNGt3TDJcL1VsYmt6UFpudDVFaTdpK2JMZ01RcTRcL2lySUFRQ1hxaXF3PT0iLCJtYWMiOiJmODZiMzg1M2QyYjNlYmUwZWI2NWI3OWY0OTZjMDIxNjYwYjc3MGQxZGZjYzg2ZmQ1M2FjMTA1NDRiODAwZWVmIn0%3D; XSRF-TOKEN=eyJpdiI6IlNha2syNGFldngrM2FZUU9ZeEpNWUE9PSIsInZhbHVlIjoiVEM1RllaaGl1XC9UUWg4b2RuVkNlcnhod1EzXC9xSG9SN0w2dEZiV3RKbDJwQXdTeWtZS0pMODBEOFJvM1V1emNZdEJmOGJISFwvUjNkd2pBK2NXcTRlM2c9PSIsIm1hYyI6IjljMjg0MTI2NDFmNmYzNGU2ZmJiMWE4ODg3OGE4NWVmNmVhYzc5YzI4ZmNkYTRjZDI2M2Y1YWYwZjIzNzc2NGIifQ%3D%3D; laravel_session=eyJpdiI6IjBzRHhqcWRPdmdleVhlcURuOG4rYVE9PSIsInZhbHVlIjoiTkYzOHpiQ2dyY2tHSmV2Znl4RUpiNWdHZVBMaVJNaEI5YWdOcXVRRzdsSEZqMFp5cXFWOVBjYjBobmxLSXhJUFBab1JRbTZxUVhkekZVNjY3OUVkYmc9PSIsIm1hYyI6ImIxNjA0Y2E1NDdjNDc5YzA4NGYxNTgyMTNiMjdiY2RlODg0MzFjMDQ3N2ZjMTZiNDlmN2Q5Zjg3NWU0YTc1NWEifQ%3D%3D  
Host:api.ryno.dev  
Origin:http://api.ryno.dev  
Pragma:no-cache  
Referer:http://api.ryno.dev/post  
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36  
X-Requested-With:XMLHttpRequest  


Request Payload  
------WebKitFormBoundaryEqAfOqBqekRWHC6B  
Content-Disposition: form-data; name="file";        filename="10690061_724847794275121_4784866042446245380_n.jpg"  
Content-Type: image/jpeg  


------WebKitFormBoundaryEqAfOqBqekRWHC6B--  

Eared

Answer 1

You need to disable automatic Dropzone discovery first, if you haven't already:

Dropzone.autoDiscover = false;

Then add 2 headers to Dropzone. These are the same ones that Laravel adds to axios in the default JavaScript scaffolding (in bootstrap.js):

let token = document.head.querySelector('meta[name="csrf-token"]');

var dropzone = new Dropzone(".dropzone", {
    url: "/api/photos",
    headers: {
        'X-CSRF-TOKEN': token.content,
        'X-Requested-With': 'XMLHttpRequest'
    },
    acceptedFiles: "image/*"
});

Make sure you also have the CSRF token as a meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

Bainite

Answer 2

As per Laravel documentation for API Authentication with Javascript:

If you are using a different JavaScript framework, you should make sure it is configured to send the X-CSRF-TOKEN and X-Requested-With headers with every outgoing request.

I see the X-CSRF-TOKEN missing from your POST request. Can you try adding that and see if it works.

Spanos

I do have it set to add it to every ajax request in jQuery maybe I need to set something specific with Dropzone? – Eared

Can you try to add the token as part of the formData something like: function(file, xhr, formData) { formData.append("_token", "{{ csrf_token() }}"); }, – Spanos

Answer 3

Even if you add the csrf_token() inside meta under head tag. It's token will not be recognized by dropzone js. Instead add it manually for dropzone.

<input type="hidden" class="leads_token" value="{{ csrf_token() }}">

Dropzone.options.dropzoneBox = {
    url: APP_URL + "yourpath",
    params: {
        _token: $('.leads_token').val()
    },
}

Hora