Docker+RailsAPI+ReactでReactからAPIへの接続がERR_EMPTY_RESPONSEになってしまう

Question

実現したいこと

• Reactのコード内からRailsAPIに接続してデータを取得したい

前提

DockerとReactの練習のため、Docker+RailsAPI+Reactで簡単なwebアプリを作っています。
Reactのコード内からAPIに接続する段階で、ERR_EMPTY_RESPONSEとなってしまい接続できません。

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

GET http://localhost:3001/api/v1/pages net::ERR_EMPTY_RESPONSE
Uncaught (in promise) Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

該当のソースコード

FROM ruby:3.1.3
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y nodejs yarn \
  && mkdir /my_dictionary_api
WORKDIR /my_dictionary_api
COPY Gemfile /my_dictionary_api/Gemfile
COPY Gemfile.lock /my_dictionary_api/Gemfile.lock
RUN gem update --system
RUN bundle install
COPY . /my_dictionary_api

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3001

FROM node:17.2
RUN mkdir /my_dictionary_front
WORKDIR /my_dictionary_front

version: '3.8'
services:
  db:
    platform: linux/x86_64
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: dictionary
    ports:
      - 3306:3306
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  api:
    build: ./api
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3001 -b '0.0.0.0'"
    volumes:
      - ./api:/my_dictionary_api
      - gem_data:/usr/local/bundle
    ports:
      - "3001:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true
  front:
    build: ./front
    command: yarn start
    ports:
      - "3000:3000"
    volumes:
      - ./front:/my_dictionary_front
    depends_on:
      - api

volumes:
  mysql-data:
  gem_data:
    driver: local

//client.js

import applyCaseMiddleware from 'axios-case-converter';
import axios from 'axios';

const options = {
  ignoreHeaders: true
}

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

export default client

//pages.js

import client from './client';
export const Top = () => {
  return client.get('/pages');
}

#pages_controller.rb

class Api::V1::PagesController < ApplicationController 
  def index 
    test_json = {
      data: [
        {id: 1, title: 'first text', text: '最初のテキスト'},
        {id: 2, title: 'second text', text: '２行目のテキスト'}
      ]
    }

    render json: test_json
  end
end

#cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "localhost:3001"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

試したこと

• corsを設定しました
• docker psで確認してみましたが、問題点がわかりませんでした

CONTAINER ID   IMAGE              COMMAND                  CREATED       STATUS         PORTS                               NAMES
8b8e4889c354   dictionary_front   "docker-entrypoint.s…"   4 hours ago   Up 3 minutes   0.0.0.0:3000->3000/tcp              dictionary_front_1
e2010b11a04c   dictionary_api     "entrypoint.sh bash …"   4 hours ago   Up 3 minutes   3001/tcp, 0.0.0.0:3001->3000/tcp    dictionary_api_1
095a584316a3   mysql:8.0          "docker-entrypoint.s…"   4 hours ago   Up 3 minutes   0.0.0.0:3306->3306/tcp, 33060/tcp   dictionary_db_1

• apiコンテナ内でcurlしてみましたが、こちらは正常にアクセスできました

root@e2010b11a04c:/my_dictionary_api# curl http://localhost:3001/api/v1/pages
{"data":[{"id":1,"title":"first text","text":"最初のテキスト"},{"id":2,"title":"second text","text":"２行目のテキスト"}]}root@e2010b11a04c:/my_dictionary_api# 

• エラーのMinified React error #321について、reactが2回呼ばれているところがないか確認しましたが、ありませんでした

補足情報（FW/ツールのバージョンなど）

• Ruby 3.1.3
• Rails 7.0.4.2
• React 18.0.0
• axios 1.3.2

よろしくお願いいたします。