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

Question

前提・実現したいこと

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

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

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

'https://deploy-preview-1--line-form-frontend.netlify.app'から'https://29500ee86135.ngrok.io/api/'のXMLHttpRequestへのアクセスがCORSポリシーによってブロックされている。
リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダが存在しない。

Access to XMLHttpRequest at 'https://29500ee86135.ngrok.io/api/' from origin 'https://deploy-preview-1--line-form-frontend.netlify.app' has been blocked by CORS policy: 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_URL=http://web/api
API_BROWSER_URL=https://29500ee86135.ngrok.io/api

バックエンド側も以下のように設定しています。

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
  public function handle($request, Closure $next)
  {
    return $next($request)
      ->header('Access-Control-Allow-Origin', 'https://deploy-preview-1--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');
  }
}

何故CORSエラーが発生するのでしょうか？
大変恐縮ですが、ご教授お願いいたします。

追記

レスポンスヘッダーに関して

Comments

[ockeghem]

デベロッパーツールのNetworkタブを用いて、APIの返すレスポンスヘッダを調べて追記してください。

[RyoS_]

ご連絡ありがとうございます。
追記いたしました。

[ockeghem]

レスポンスヘッダに Access-Control-Allow-Origin: https://deploy-preview-1--line-form-frontend.netlify.app は出てないですね。他の Access-Control-Allow-* も。使い方が間違っているのではないですか?

[RyoS_]

ご連絡ありがとうございます。
そうですね。
以下の記事などを参考に試してみましたが、レスポンスヘッダに Access-Control-Allow-Originが追加されることはなかったです。
https://zenn.dev/mouse_484/articles/nuxt-axios-cors

プラグインを作って、setHeaderで付与してみます。
$axios.onResponse(config => {
$axios.setHeader('Access-Control-Allow-Origin', 'URL')
})

Answer 1

プラグインを作って、setHeaderでCORSの設定をしました。
違うエラーが発生しましたが、ockeghemさんがおっしゃっていた以下の問題は解消しました。
Access-Control-Allow-Origin: https://deploy-preview-1--line-form-frontend.netlify.app

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'
    );
    $axios.setHeader('Access-Control-Allow-Credentials', 'true');
  });
}