Laravel 7 - Заголовок Access-Control-Allow-Origin отсутствует на запрошенном ресурсе

Question

Я знаю, что это очень распространенная проблема, и есть много других вопросов по ней, однако я не знаю, что делать дальше. Я обновил свое приложение Laravel API с 5.8 до 7.10.3, и теперь я столкнулся с проблемой CORS, которой раньше не было. Laravel 7 уже предоставляет пакет fruitcake/laravel-cors, и это моя конфигурация (конфигурация по умолчанию) в config/cors.php:

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

В основном разрешены все origin, headers и methods. Я даже пытался добавить эти строки в bootstrap/app.php, но это не сработало:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

Мой интерфейс построен на VueCli 3, и я не вносил в него никаких изменений, просто обновил Laravel версия.

Запросы на POSTMAN работают нормально. Кто-нибудь знает, почему возникает эта проблема?

Полное сообщение об ошибке:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/operacao/cadastrar' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

Я обнаружил проблему: мой запрос не удался в методе $request->validate(), и он был внутри блока try / catch с настраиваемым обработчиком исключений, например:

try {
    $request->validate(array(...)); //validation was failing
    //code...
} catch (\Exception $e) {
    //This was the problem
    http_response_code(400);
    die($e->getMessage());
}

Просто введите $request->validate() до try и это сработало. Просто помню, что validate() имеет собственный обработчик исключений.

Я не знаю точно, почему это вызывало ошибку CORS, но я думаю, что это потому, что он отправлял headers перед Access-Control-Allow-Origin et c.

Answer 2

У меня была аналогичная проблема с использованием REACT, и я решил добавить заголовки и отформатировать свой запрос следующим образом.

axios.request({
      method: "POST",
      url: '<url>',
      data: data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
   })
   .then(function (response) {
     <what to do if works>
   })
   .catch((response) => {
    <what to do if it doesn't work>
   })