[Rust] axumでCORSエラーの回避設定がうまくいかない

実現したいこと

Next.jsを使ってローカルで自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

ブラウザのコンソールを見ると、口述する画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。さらに調べると異なるオリジン間でのWebリソース共有を制御するしくみが働いているために発生している事象とのことでした。

これを回避するために、こちらを参考にまずはバックエンド側でCORS設定を施そうと検討しています。

ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

↓ブラウザのコンソールエラー

※http://localhost:3000/top がバックエンドサーバーのURL（フロント側のfecth関数内のurlの箇所に記載しているurl）
※http://localhost:3001 はフロント側のURL（ブラウザにURL入力するURL）

該当のソースコード

Rustのルーティング設定

use std::env;
use axum::response::{IntoResponse, Redirect};
use http::{header::HeaderValue};
use dotenv::dotenv;
use crate::career_contents::{edit_career, show_career, create_career};
use crate::auth::{sign_up, login};
use tower_http::cors::CorsLayer;

pub async  fn running_router()  {
  let origins = [
    "http://localhost:3001".parse::<HeaderValue>().unwrap(),      //フロント側（http://localhost:3001）からのアクセスを許可するよう設定
];

    let app = axum::Router::new()
    
    .route("/top", axum::routing::get(show_career::show_top))
    .layer(          //layerを新しく追加した。
      CorsLayer::new()
          .allow_origin(origins)
  );