Nuxt.jsとLaravelのAPIでAjax通信した際のCORSエラーが解消できない

前提・実現したいこと

Nuxt.jsとLaravelのAPI通信ができるようにしたい。

現在Nuxt.jsとLaravelでLIFFアプリを作っています。
Nuxt.jsからAxiosでAPIを叩いた時、CORSエラーが発生しました。

発生している問題・エラーメッセージ

'https://line-form-frontend.netlify.app'から'https://50a7e4b5197c.ngrok.io/api/'のXMLHttpRequestへのアクセスは、CORSポリシーによりブロックされている。
プリフライトリクエストへのレスポンスがアクセスコントロールチェックを通過しません。
リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しません。

Access to XMLHttpRequest at 'https://50a7e4b5197c.ngrok.io/api/' from origin 'https://line-form-frontend.netlify.app' 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.

コンソール

試したこと

①PostmanでAPIが動くことを確認

問題なく取得できました。

②CORSの対応

フロントエンド

nuxt.config.js

proxy: {
    '/api': environment === 'development' ? process.env.API_URL : 'https://www.example.org',
  },

  axios: {
    baseURL: process.env.API_URL,
    browserBaseURL: process.env.API_BROWSER_URL,
    credentials: true,
  },

.env

# API
API_URL=http://web/api
API_BROWSER_URL=https://50a7e4b5197c.ngrok.io/api

バックエンド

Middleware/Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
  public function handle($request, Closure $next)
  {
    return $next($request)
      ->header('Access-Control-Allow-Origin', 'https://line-form-frontend.netlify.app/')
      ->header('Access-Control-Allow-Methods', 'GET, POST')
      ->header('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN')
      ->header('Access-Control-Allow-Credentials', 'true');
  }
}

Kernel.php

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'cors' => \App\Http\Middleware\Cors::class,
  ];

route/api.php

Route::middleware(['cors'])->group(function () {
  Route::get("/", function () {
    return "Hello World!";
  });
});

この時点でのエラー内容

レスポンスヘッダに Access-Control-Allow-Originなどがありませんでした。

③プラグインの追加

plugins/axios.js

export default function({ $axios, redirect }) {
  $axios.onResponse(config => {
    $axios.setHeader('Access-Control-Allow-Origin', process.env.API_BROWSER_URL);
    $axios.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,PUT,PATCH,POST,DELETE');
    $axios.setHeader(
      'Access-Control-Allow-Headers',
      'X-Requested-With, Origin, X-XSRF-TOKEN, Content-Type, Accept, X-CSRD-TOKEN'
    );
    $axios.setHeader('Access-Control-Allow-Credentials', 'true');
  });
}

Access-Control-Allow-Originなどをレスポンスヘッダに設置することはできました。
しかし、エラーメッセージで**「リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しません。」**と返ってきているのでどうすべきかがわかりません。