带有 Dropzonejs 的 Laravel Passport

Question

我正在开发一个具有运行 Laravel Passport 的 API 层的项目。我已将 createFreshApiToken 添加到我的应用程序中，并且我的所有 jQuery ajax 请求都运行良好。

今天我正在集成 DropzoneJS，当我尝试上传文件时，它得到了 401 Unauthorized。我检查了请求 header ，并且在 cookie header 中设置了 laravel_token。

当请求 header 中包含 laravel_token 时，什么会导致 Laravel Passport 抛出 401 Unauthorized 响应？

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--  

Answer 1

您需要先禁用自动 Dropzone 发现，如果您还没有:

Dropzone.autoDiscover = false;

然后将 2 个标题添加到 Dropzone。这些与 Laravel 在默认 JavaScript 脚手架中添加到 axios 的相同(在 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/*"
});

确保您还有 CSRF token 作为元标记:

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