Каждый раз, когда мне нужно отправлять аякс запросы в laravel, я сталкиваюсь с одной и той же проблемой. Получаю ошибку вида
Access to XMLHttpRequest at 'xxx' from origin 'localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
.
Причина понятна: запрос с другого домена. Но дело в том, что в Laravel установлен Middleware, который добавляет вот такой код
public function handle($request, Closure $next)
{
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: *');
return $next($request);
}
Такой код не помогает. Единственное что помогает - это слать запросы через jquery. К этому я пришел от отчаяния методом тыка.
Вообще приложение на vue и для запросов к апи я пытаюсь использовать axios, который выдает вышеописанную ошибку. При замене на jquery все работает. Открыв консоль разработчика, я вижу, что jquery шлет POST запрос, а axios почему-то OPTIONS. OPTIONS шлет не только axios, но и другие библиотеки, которые я пытался использовать. Дело всегда заканчивалось тем, что я плевал на это и подключал jquery.
Я прочел абсолютно все что только можно в гугле. Это какой-то идиотизм, люди пишут, что у них те же проблемы, а им советуют вставлять заголовки Access-Control-Allow-Headers: *, а если звёздочка не работает, то перечислять вручную.
Это ведь очень распространенная проблема, и наверняка мелочная, но почему-то она не гуглится совсем.
В очередной раз столкнувшись и решив все-таки выкинуть jquery, я хочу наконец-то разобраться в чем дело.
В итоге вопроса 2:
1) Почему библиотеки
vue-resource и
axios (и наверное многие другие) шлют запрос OPTIONS, хотя я прошу послать POST. И почему jQuery этот OPTIONS не шлет. Я так понимаю, что причина в этом.
2) Как сделать, чтоб OPTIONS ( если причина в этом) обрбатывался. Потому что никакие вариации заголовков не помогают, я как только не пробовал.
Помогите, пожалуйста, а то снова придется забить и слать запросы через jQuery.
UPD
Вот данные из консоли разработчика:
General:
Request URL:xxx
Request Method: OPTIONS
Status Code: 200
Remote Address: xxx:443
Referrer Policy: no-referrer-when-downgrade
Response headers:
allow: GET,HEAD,POST,PUT,PATCH,DELETE
cache-control: no-store, no-cache, must-revalidate, no-cache
UPD2:
А вот как выглядит информация о запросе через jQuery
General:
Request URL: xxx
Request Method: POST
Status Code: 200
Remote Address: xxx:443
Referrer Policy: no-referrer-when-downgrade
Response headers:
access-control-allow-origin: *
cache-control: no-store, no-cache, must-revalidate, no-cache
То есть jQuery отправляет POST и получает access-control-allow-origin: *, а axios отправляет OPTIONS и получает allow: GET,HEAD,POST,PUT,PATCH,DELETE
UPD3:
Вот
тут люди пишут, что добавление заголовков непосредственно в routes.php помогает. Проверил, действительно работает. Получается, что запрос "обрывается" до того, как его обработает middleware. Решение - добавить middleware для всего проекта. Но ведь мне надо только для определенных маршрутов.
Простой
Простой