使用multipart/form-data header使用vuejs、laravel、axios上传文件导致401答案

【问题标题】：Using multipart/form-data header to upload files using vuejs, laravel, axios causes 401使用multipart/form-data header使用vuejs、laravel、axios上传文件导致401
【发布时间】：2020-02-16 09:29:59
【问题描述】：

我正在尝试使用 axios 库上传文件。

axios.post('/images/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
  }).then( response => console.log(response))

Route::middleware('auth:api')
 ->group( function() {
  Route::post('/images/upload', 'ImageController@store');
})

我收到以下状态码错误

{"message": "unauthenticated"}

当我删除标题部分，即“multipart/form-data”时，请求就会通过，但这不是bueno，因为我还需要发送文件。

【问题讨论】：

你使用的是 Laravel Passport 还是 Token 认证？
不，我没有使用护照，只是 CSRF 令牌。
您正在使用令牌身份验证（CSRF 是另一回事），您是否为用户创建了访问令牌？
抱歉，是的，我正在使用令牌身份验证，它适用于所有其他请求，只是在 multipart/form-data 标头存在时无效。
我已经为用户创建了访问令牌并检查了 - 它们是随请求一起发送的。

标签： laravel axios

【解决方案1】：

我在尝试重现此问题时发现了问题

发送带有 api_token 的 Bearer 头

例如

<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app">
    <input type="file" name="image" id="image" onchange="upload()">
</div>

<script src="{{ asset('js/app.js') }}" defer></script>
<script>
    function upload() {
        let image = document.getElementById('image').files[0];
        let formData = new FormData();
        formData.append('image', image);
        axios.post('/images/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': 'Bearer {{ auth()->user()->api_token }}',
            }
        }).then( response => console.log(response))
    }
</script>

假设这样的控制器功能

public function store(Request $request)
{
    $path = $request->file('image')->store('public');
    return $path;
}

您将在响应中获得存储的图像 url

希望这会有所帮助:)

【讨论】：

救命稻草！你知道我为什么要那样做吗？
因为auth:api 中间件会在Authorization 请求标头中检查api_token
好的，但是似乎只有在添加“multipart/form-data”标头时才会发生，这对它有什么影响？
不应该影响它，无论您是发布图片还是仅发布文本，都需要授权标头
是的，就是这样，我使用axios拦截在每个post请求上添加api_token，但是，当我添加这个header时，它就不再包含了。