Question

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

今天我正在整合DropzoneJS，当我尝试上传文件时，它获得了401 Unauthorized。我检查了请求标头，并在cookie标头中设置了laravel_token。

当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

根据Laravel使用Javascript进行API身份验证的文档：

如果您使用的是其他JavaScript框架，那么您应该这样做确定它配置为发送X-CSRF-TOKEN和X-Requested-With 每个传出请求的标题。

我看到您的POST请求中缺少X-CSRF-TOKEN。你可以尝试添加它，看它是否有效。

Answer 2

即使您在头部标记下添加csrf_token()内部元素。 dropzone js不会识别它的标记。而是手动为dropzone添加它。

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

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

Answer 3

如果尚未启用，则需要先禁用自动Dropzone发现：

Dropzone.autoDiscover = false;

然后将2个标头添加到Dropzone。这些与Laravel在默认JavaScript支架（在bootstrap.js中）添加到axios的相同：

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令牌作为元标记：

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

带有Dropzonejs的Laravel Passport

3 个答案: