herokuデプロイ後のバックエンドの呼び出し

実現したいこと
現在、バックエンドをrails(docker環境),フロントエンドをReactにてアプリの開発を行なっています。

フロント、バックエンド共に、herokuへのデプロイは完了したのですが、
フロント側から、バックエンドへの通信がうまくいきません。

Rails、Reactは別フォルダーで作成しています。
├── バックエンド
├── フロントエンド

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

上記画像のようなエラーが出てしまい、バックエンド側とうまく接続できていないようです。

バックエンドで呼び出す際のURLをherokuのURLにしてみましたがレスポンス404と出てきてしまい、うまくいきませんでした。

どなたか力添えお願いします。

app/controllers
├── api
│ └── v1
│ ├── auth
│ │ ├── registrations_controller.rb
│ │ └── sessions_controller.rb
│ ├── englishlists_controller.rb
│ ├── lists_controller.rb
│ ├── test_controller.rb
│ └── users_controller.rb
├── application_controller.rb

cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3000','https://englist-f.herokuapp.com'
    resource '*',
      headers: :any,
      expose: ["access-token", "expiry", "token-type", "uid", "client"],
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

API呼び出し
const client = applyCaseMiddleware(
    axios.create({
      baseURL:"http://localhost:3001/api/v1"
}), options)

export default client

参考サイト
(https://medium.com/@bruno_boehm/reactjs-ruby-on-rails-api-heroku-app-2645c93f0814)
(https://qiita.com/mayutakino/items/446512b12b84a07d3f4b)
(https://blap.blog/?p=863#toc13)