rails api + axiosで「406 (Not Acceptable)」

rails api + Reactで投稿一覧を表示する機能を作成していたときに発生したエラーについてです。

投稿一覧表示用のフロントエンドのコンポーネントPosts.tsxにて以下のようにaxiosを用いてapiからgetでデータを取ってきてとりあえずコンソールで表示しようとしたときに、

Posts.tsx
1const Posts: React.FC = () => {
2
3  useEffect(() => {
4    axios
5      .get('http://localhost:3001/posts')
6      .then((res) => {
7        console.log('投稿取得!!');
8        console.log(res.data);
9      })
10      .catch((error) => {
11        console.log('registration error', error);
12      });
13  }, []);
14
15  return (
16    <div>
17      <h1>こんにちは</h1>
18    </div>
19  );
20};

コンソールにて以下のエラーが発生しました。

console
1GET http://localhost:3001/posts 406 (Not Acceptable)
2registration error Error: Request failed with status code 406
3    at createError (createError.js:16)
4    at settle (settle.js:17)
5    at XMLHttpRequest.handleLoad (xhr.js:62)

以下はナックエンド側のコードです。

routes.rb

routes.rb
1Rails.application.routes.draw do
2  resources :posts, only: [:index, :create]
3end

posts_controller.rb

posts_controller.rb
1class PostsController < ApplicationController
2
3    def index
4        @posts = Post.all
5    end
6
7    def create
8        @post = Post.new(post_params)
9        @post.save
10        redirect_to action: 'index'
11    end
12      
13    private
14
15        def post_params
16            params.require(:post).permit(:title, :content)
17        end
18end

試したこと

主に2つ試しました。

①apiを叩くコードにheadersを追加

    axios
      .get('http://localhost:3001/posts', {
        headers: { 'Content-Type': 'application/json' },
        data: {},
      })
      .then((res) => {
        console.log('投稿取得!!');
        console.log(res.data);
      })
      .catch((error) => {
        console.log('registration error', error);
      });

②routesのアクションをonly: [:index]にし、posts_controllerからcreateアクションを削除

これはエラーメッセージにat createError (createError.js:16)という記載があったため、rails routesでルートを確認したところ、

/postsというルートは二つあり、一つはGETでアクションがposts#index、もう一つがPOSTでアクションがposts#create

だったため、createアクションが動いているのでは？と考え試しました。

これら2つ試しましたが、うまくいきませんでした。cros関連で問題でもあるのかとも思ったのですが、crosに関しては知識が全くなく、問題があるのかもわからず。。。以下はcrosの設定ファイルです。
cros.rb

cros.rb
1Rails.application.config.middleware.insert_before 0, Rack::Cors do
2  allow do
3    origins 'http://localhost:3000'
4
5    resource '*',
6             headers: :any,
7             methods: %i[get post put patch delete options head],
8             credentials: true
9  end
10
11  # 本番環境用のオリジン設定
12  allow do
13    origins 'https:<自身が設定するアプリのURL>'
14
15    resource '*',
16             headers: :any,
17             methods: %i[get post put patch delete options head],
18             credentials: true
19  end
20end