【Rails6 Vue.js】axios.getで406エラー

Question

Rails6とVue.jsでaxiosを使ってAPI通信

Rails6とVue.jsでaxiosを使いgetメソッドを使ったところ406errorが返されてしまいます。原因が突き止められず対処方法がわかりません。
もし、ご存知の方がいらっしゃいましたらお手数ですがご回答の程よろしくお願いいたします。

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

GET http://localhost:3000/api/scores 406 (Not Acceptable)
Uncaught (in promise) Error: Request failed with status code 406
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:69)

該当のソースコード

app/javascript/views/Home.vue
ここのaxios.get箇所で406となってしまっています。

<template>
  <section id="home">
    <h1>{{ title }}</h1>
  </section>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      title: "Homeです"
    };
  },
  created: function(){
    this.fet();
  },
  methods: {
    fet: function(){
      axios.get('/api/scores')
      .then((response) => {
        console.log(response)
      })
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

routes.rb

Rails.application.routes.draw do

  root to: 'home#index'

  namespace :api do
    resources :scores, only: [:index]
  end

  get '*path', to: 'home#index', format: false   #getのリクエストをまとめる
end

app/controllers/api/scores_controller.rb

class Api::ScoresController < ApplicationController
  # GET /scores
  def index
    @scores = Score.order('updated_at DESC')
  end
end

app/views/api/scores/index.json.jbuilder

json.set! :scores do
  json.array! @scores do |score|
    json.extract! score, :id, :name
  end
end

試したこと

curlでアクセスしてみたところ取得できていることは確認しました。

curl localhost:3000/api/scores
#出力 {"scores":[{"id":24,"name":"ゆき"},{"id":23,"name":"ゆき"}

ブラウザ画面もコンソールエラー以外は表示されています。
よろしくお願いいたします。

Answer 1

自己解決いたしました。
routes.rbに format: 'json'の指定を忘れておりました。
そのためレスポンスがjson形式で返されず406エラーになったものと思われます。
お騒がせいたしました。

routes.rb

Rails.application.routes.draw do
  root to: 'top#index'

  namespace :api, format: 'json' do
    resources :scores, only: [:index]
  end

  get '*path', to: 'top#index', format: false   #getのリクエストをまとめる
end