Laravel: Отсутствует заголовок 'access-control-allow-origin' на запрашиваемом ресурсе

03/01/2023 14:02

В этом руководстве вы узнаете, как включить CORS (Cross-Origin Resource Sharing / обмен ресурсами между источниками) в Laravel 10/9/8/7, чтобы исправить/решить проблему отсутствия заголовка 'access-control-allow-origin' на запрашиваемом ресурсе laravel.

Laravel CORS: Как включить CORS в Laravel

Если вы обнаружили проблему access-control-allow-origin htaccess в Laravel 10/9/8/7, то вы можете воспользоваться следующими способами решения/исправления проблемы отсутствия заголовка 'access-control-allow-origin' на запрашиваемом ресурсе в Laravel 10/9/8/7.

Laravel CORS

Прежде всего, выполните следующую команду в терминале, чтобы установить свежее приложение Laravel;

composer create-project laravel/laravel laravel-cors-tutorial --prefer-dist
cd laravel-cors-tutorial

Затем выполните следующую команду, чтобы начать проверку CORS в приложении laravel.

php artisan serve

CORS Middleware Nitty-Gritty

Вместе с установкой нового приложения также создается файл config/cors.php. Laravel позволяет выполнять следующие конфигурации, связанные с cors.

<?php
return [
    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

Создайте API в Laravel

Чтобы включить CORS в API, посетите routes/api.php и вставьте приведенный ниже код.

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::get('/demo-url',  function  (Request $request)  {
   return response()->json(['Laravel CORS Demo']);
});

Выполните запрос HTTP GET с помощью AJAX

Давайте создадим один файл вида blade с именем demo.html и добавим в него следующий код для выполнения http get запроса с помощью ajax;

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Laravel CORS Middleware</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script>
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'http://localhost:8000/demo-url',
            success: function (data) {
                console.log(data);
            }
        });
    </script>
     
</body>
</html>

Возникновение ошибки Access-Control-Allow-Origin

Если вы обнаружили эту ошибку (No ‘Access-Control-Allow-Origin’ header is present on the requested resource.), она возникла потому, что два разных домена пытаются обмениваться данными друг с другом. И да, вы еще даже не включили CORS.

Access to XMLHttpRequest at 'http://localhost:8000/demo-url' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Установите библиотеку CORS в Laravel

Выполните следующую команду в терминале, чтобы установить пакет fruitcake/laravel-cors для решения проблемы cors;

composer require fruitcake/laravel-cors

Регистрация CORS Middleware

Настройте поддержку заголовков CORS (Cross-Origin Resource Sharing) в вашем приложении Laravel.

Итак, откройте routes в файле app/Http/Kernel.php. и класс \Fruitcake\Cors\HandleCors в верхней части внутри массива $middleware, чтобы включить CORS;

protected $middleware = [
  \Fruitcake\Cors\HandleCors::class,
    // ...
    // ...
];

На этом все. В этом руководстве вы узнали, как включить CORS (Cross-Origin Resource Sharing) в Laravel 10/9/8/7, чтобы исправить/решить проблему отсутствия заголовка 'access-control-allow-origin' на запрашиваемом ресурсе laravel.

Laravel

0 + 1 -

MakeCodes
0
623