Laravel сообщает 400 (неверный запрос; токен не предоставлен) в моей системе, управляемой VueJS + JWT

Question

Когда я отправляю форму из компонента Vue через axios, возвращается запрос 400 Bad.Генерация токена (через вход в систему / регистрация) работает нормально, а заголовки запроса показывают токен, присутствующий в заголовке авторизации.Я проверил порядок отчетов об исключениях в 'handler.php', и вызванное исключение JWTException является последним проверенным типом исключений.Я прочитал, что мой .htaccess может быть неправильно настроен, но это не так.

Я работаю на машине с Windows, и кроме этого я не уверен, какую другую информацию предоставить.Ниже приведено содержимое файла api.php, а под ним - контроллер, для которого обрабатывается содержимое формы (или не так, как сейчас!), Метод Vue, используемый при отправке формы, и мой JWT.phpсодержимое:

Route::apiResource('/question','QuestionController');
Route::apiResource('/category','CategoryController');
Route::apiResource('/question/{question}/reply','ReplyController');
Route::post('/like/{reply}','LikeController@likeIt');
Route::delete('/like/{reply}','LikeController@unLikeIt');

Route::group([

  'middleware' => 'api',
  'prefix' => 'auth'

], function ($router) {

  Route::post('login', 'AuthController@login');
  Route::post('logout', 'AuthController@logout');
  Route::post('signup', 'AuthController@signup');
  Route::post('refresh', 'AuthController@refresh');
  Route::post('me', 'AuthController@me');
  Route::post('payload', 'AuthController@payload');

---

QuestionController.php

namespace App\Http\Controllers;

use App\Models\Question;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
use App\Http\Resources\QuestionResource;
use App\Http\Requests\QuestionRequest;

class QuestionController extends Controller
{
  public function __construct()
  {
    $this->middleware('JWT', ['except' => ['index','show']]);
    //No one can create a question without having a token
  }

  public function store(Request $request)
  {
    $request['slug'] = str_slug($request->title);
    auth()->user()->question()->create($request->all());
    return response('Created', Response::HTTP_CREATED); 
}

---

Create.vue

:
methods: {
  create(){
     axios.post('/api/question',this.form)
     .then(res => console.log(res.data))
     .catch(error => this.errors = error.response.data.error)
  }...

Мое содержимое JWT.php:

namespace App\Http\Middleware;

use Closure;
use JWTAuth;


class JWT
{
    public function handle($request, Closure $next)
    {
      JWTAuth::parseToken()->authenticate();
      //JWTAuth::toUser(JWTAuth::getToken());
      return $next($request);
    }
}

Что еще / где еще я могу найти ошибку, которую я совершил?

Спасибо,

Том

Answer 1

Проблема заключалась в том, что я настраивал заголовок авторизации в своем файле app.js как

const JWTtoken = `Bearer ${localStorage.getItem('token')}`;
window.axios.defaults.headers.common['Authorization'] = JWTtoken;

, но 'Bearer' был / был удален из отправляемого заголовка.Итак, я изменил метод, с помощью которого содержимое формы отправлялось на сервер, чтобы заголовок Authorization был добавлен в этот момент:

        create(){
            const JWTtoken = `Bearer ${localStorage.getItem('token')}`;
            window.axios.defaults.headers.common['Authorization'] = JWTtoken;
            axios.post('/api/question',this.form)
                .then(res => console.log(res.data))
                .catch(error => this.errors = error.response.data.error)
        }

, и все теперь работает.

Всего три дня ушло на эту проблему!