Разрешить X-CSRF-TOKEN в проекте laravel + vuejs?

Question

Я создал проект laravel с vuejs.Я хочу получить файл data.js с другого сервера, но не получаю его.При запуске проекта в консоли возникают следующие ошибки

Поле заголовка запроса X-CSRF-TOKEN не разрешено Access-Control-Allow-Headers в ответе предпечатной проверки.

Я пытался решить это, но не получил решения.Вот мой код:

cors.php

 public function handle($request, Closure $next)
{   
    //return $next($request);
    header("Access-Control-Allow-Origin: *");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'Content-Type, X-CSRF-TOKEN, X-Auth-Token, Origin'
    ];
    if($request->getMethod() == "OPTIONS") {
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        return Response::make('OK', 200, $headers);
    }

    $response = $next($request);
    foreach($headers as $key => $value)
        $response->header($key, $value);
    return $response;
}

bootstrap.js

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
  csrf-token');
}

Я получаюX-CSRF-Token также в метатеге.Как разрешить этот x-CSRF-токен?Если кому-то нужна дополнительная информация, дайте мне знать.Любая помощь будет оценена.Спасибо!

Answer 1

Заменить document.head.querySelector('meta[name="csrf-token"]'); на $('meta[name="csrf-token"]').attr('content');

let token = $('meta[name="csrf-token"]').attr('content');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
    csrf-token');
}

Answer 2

Можете ли вы попробовать добавить это в свои маршруты.

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token,authorization');

Я столкнулся с подобной проблемой, и добавление этой строки в мой файл маршрутов помогло мне решить проблему.

Answer 3

другой сервер не принимает X-CSRF-TOKEN в запросе CORS.

Вы не можете ничего с этим поделать, кроме как не отправлять токен в запросе.Фактически, отправка токена CSRF на удаленный сервер может поставить под угрозу безопасность ваших пользователей.Если, конечно, другой сервер не является сервером, которым вы управляете.

Просто удалите строки, которые задают заголовок в axios из вашего bootstrap.js, чтобы разрешить axios выполнять запросы CORS, но не забывайте всегда отправлять токен.

Answer 4

Возможно, у вас есть что-то подобное в вашем коде

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});